<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>环境数据助手 - 单页面原型</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.2/dist/echarts.min.js"></script>
    <style>
        :root {
            --primary-color: #1890ff;
            --secondary-color: #52c41a;
            --dark-color: #001529;
            --light-color: #f0f2f5;
            --danger-color: #ff4d4f;
            --warning-color: #faad14;
            --border-radius: 4px;
            --box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
        }
        
        body {
            font-family: "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
            background-color: #f5f5f5;
            color: #333;
            overflow-x: hidden;
            margin: 0;
            padding: 0;
        }

        /* 主界面布局 */
        .app-container {
            display: flex;
            min-height: 100vh;
        }

        /* 左侧侧边栏 */
        .sidebar {
            width: 240px;
            background-color: var(--dark-color);
            color: white;
            padding-top: 0;
            display: flex;
            flex-direction: column;
            transition: all 0.3s;
            position: fixed;
            height: 100vh;
            z-index: 1000;
        }

        .sidebar-header {
            height: 60px;
            display: flex;
            align-items: center;
            padding: 0 20px;
            background-color: rgba(0, 0, 0, 0.2);
        }

        .logo {
            display: flex;
            align-items: center;
            color: white;
            font-size: 18px;
            font-weight: 500;
        }

        .logo i {
            font-size: 24px;
            margin-right: 10px;
            color: var(--primary-color);
        }

        .sidebar-body {
            flex: 1;
            overflow-y: auto;
            padding: 20px 0;
        }

        .nav-menu {
            list-style-type: none;
            padding: 0;
            margin: 0;
        }

        .nav-item {
            margin-bottom: 5px;
        }

        .nav-link {
            display: flex;
            align-items: center;
            padding: 12px 20px;
            color: rgba(255, 255, 255, 0.65);
            text-decoration: none;
            transition: all 0.3s;
            cursor: pointer;
        }

        .nav-link:hover, .nav-link.active {
            color: white;
            background-color: rgba(255, 255, 255, 0.1);
        }

        .nav-link i {
            margin-right: 10px;
            width: 20px;
            text-align: center;
        }

        /* 主内容区域 */
        .main-content {
            flex: 1;
            margin-left: 240px;
            transition: all 0.3s;
            padding: 70px 20px 20px;
            min-height: 100vh;
            position: relative;
        }

        /* 顶部导航栏 */
        .top-navbar {
            position: fixed;
            top: 0;
            left: 240px;
            right: 0;
            height: 60px;
            background-color: white;
            box-shadow: var(--box-shadow);
            z-index: 990;
            display: flex;
            align-items: center;
            padding: 0 20px;
            justify-content: space-between;
            transition: all 0.3s;
        }

        .content-section {
            display: none;
        }

        .content-section.active {
            display: block;
        }
        
        /* 功能区域导航样式 */
        .function-nav-card {
            border: none;
            box-shadow: 0 1px 2px rgba(0,0,0,0.05);
            border-radius: 8px;
            background-color: #fff;
            margin-bottom: 1.5rem;
        }
        
        .function-nav-item {
            padding: 0.5rem;
            transition: all 0.2s ease-in-out;
        }
        
        .function-nav-item a {
            border-radius: 6px;
            padding: 1rem 0.5rem;
            transition: all 0.2s ease-in-out;
        }
        
        .function-nav-item a:hover {
            background-color: #f8f9fa;
            transform: translateY(-2px);
        }
        
        .function-nav-item .icon-container {
            height: 48px;
            width: 48px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 12px;
            margin-bottom: 10px;
        }
        
        .function-nav-item small {
            font-size: 0.75rem;
            color: #6c757d;
            display: block;
            margin-top: 0.25rem;
        }

        /* 响应式设计 */
        @media (max-width: 992px) {
            .sidebar {
                width: 80px;
            }
            .sidebar .nav-link span {
                display: none;
            }
            .sidebar .logo span {
                display: none;
            }
            .main-content {
                margin-left: 80px;
            }
            .top-navbar {
                left: 80px;
            }
        }

        /* 卡片和组件样式 */
        .card {
            background-color: white;
            border-radius: var(--border-radius);
            box-shadow: var(--box-shadow);
            margin-bottom: 20px;
        }

        .card-header {
            padding: 15px;
            border-bottom: 1px solid #f0f0f0;
            font-weight: 500;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .card-body {
            padding: 20px;
        }

        .breadcrumb {
            margin-bottom: 0;
        }

        .user-dropdown {
            display: flex;
            align-items: center;
            cursor: pointer;
        }

        .user-dropdown .avatar {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background-color: var(--primary-color);
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 8px;
        }

        /* 基础样式 */
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f5f7fa;
            color: #333;
        }
        
        /* 图表容器样式 */
        .chart-container {
            width: 100%;
            height: 350px;
            min-height: 250px;
            margin-bottom: 10px;
            background-color: #fff;
            border-radius: 5px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        }
        
        /* 特定图表的高度调整 */
        #trendComparisonChart, #forecastChart, #anomalyDetectionChart {
            height: 400px;
        }
        
        #correlationScatterChart, #calibrationChart, #validationChart {
            height: 350px;
        }
    </style>
</head>
<body>
    <div class="app-container">
        <!-- 侧边栏 -->
        <div class="sidebar">
            <div class="sidebar-header">
                <div class="logo">
                    <i class="fas fa-leaf"></i>
                    <span>环境数据助手</span>
                </div>
            </div>
            <div class="sidebar-body">
                <ul class="nav-menu">
                    <li class="nav-item">
                        <a class="nav-link active" data-section="dashboard">
                            <i class="fas fa-tachometer-alt"></i>
                            <span>仪表盘</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" data-section="raw-data">
                            <i class="fas fa-database"></i>
                            <span>原始数据</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" data-section="statistics">
                            <i class="fas fa-chart-bar"></i>
                            <span>统计数据</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" data-section="analysis">
                            <i class="fas fa-chart-line"></i>
                            <span>数据分析</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" data-section="calibration">
                            <i class="fas fa-sliders-h"></i>
                            <span>数据标定</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" data-section="settings">
                            <i class="fas fa-cog"></i>
                            <span>系统设置</span>
                        </a>
                    </li>
                </ul>
            </div>
        </div>

        <!-- 顶部导航栏 -->
        <div class="top-navbar">
            <div class="breadcrumb-container">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb mb-0">
                        <li class="breadcrumb-item"><a href="#">首页</a></li>
                        <li class="breadcrumb-item active" id="current-section">仪表盘</li>
                    </ol>
                </nav>
            </div>
            <div class="user-dropdown">
                <div class="avatar">
                    <i class="fas fa-user"></i>
                </div>
                <span>管理员</span>
                <i class="fas fa-chevron-down ms-2"></i>
            </div>
        </div>

        <!-- 主内容区域 -->
        <div class="main-content">
            <!-- 仪表盘内容 -->
            <section id="dashboard" class="content-section active">
                <h2 class="mb-4">环境监测概览</h2>
                
                <!-- 功能区域快速导航 -->
                <div class="card function-nav-card mb-4">
                    <div class="card-body py-3">
                        <div class="row text-center">
                            <div class="col-md-2 function-nav-item">
                                <a href="#" class="text-decoration-none d-flex flex-column align-items-center">
                                    <div class="icon-container" style="background-color: rgba(13, 110, 253, 0.1); color: #0D6EFD;">
                                        <i class="fas fa-database fa-lg"></i>
                                    </div>
                                    <div class="fw-medium">原始数据</div>
                                    <small>查看最新监测数据</small>
                                </a>
                            </div>
                            <div class="col-md-2 function-nav-item">
                                <a href="#" class="text-decoration-none d-flex flex-column align-items-center">
                                    <div class="icon-container" style="background-color: rgba(25, 135, 84, 0.1); color: #198754;">
                                        <i class="fas fa-chart-bar fa-lg"></i>
                                    </div>
                                    <div class="fw-medium">统计数据</div>
                                    <small>查看数据统计结果</small>
                                </a>
                            </div>
                            <div class="col-md-2 function-nav-item">
                                <a href="#" class="text-decoration-none d-flex flex-column align-items-center">
                                    <div class="icon-container" style="background-color: rgba(13, 202, 240, 0.1); color: #0DCAF0;">
                                        <i class="fas fa-chart-line fa-lg"></i>
                                    </div>
                                    <div class="fw-medium">数据分析</div>
                                    <small>分析数据关系与趋势</small>
                                </a>
                            </div>
                            <div class="col-md-2 function-nav-item">
                                <a href="#" class="text-decoration-none d-flex flex-column align-items-center">
                                    <div class="icon-container" style="background-color: rgba(255, 193, 7, 0.1); color: #FFC107;">
                                        <i class="fas fa-sliders-h fa-lg"></i>
                                    </div>
                                    <div class="fw-medium">数据标定</div>
                                    <small>校准传感器数据</small>
                                </a>
                            </div>
                            <div class="col-md-2 function-nav-item">
                                <a href="#" class="text-decoration-none d-flex flex-column align-items-center">
                                    <div class="icon-container" style="background-color: rgba(108, 117, 125, 0.1); color: #6C757D;">
                                        <i class="fas fa-cog fa-lg"></i>
                                    </div>
                                    <div class="fw-medium">系统设置</div>
                                    <small>设置系统参数</small>
                                </a>
                            </div>
                            <div class="col-md-2 function-nav-item">
                                <a href="#" class="text-decoration-none d-flex flex-column align-items-center">
                                    <div class="icon-container" style="background-color: rgba(220, 53, 69, 0.1); color: #DC3545;">
                                        <i class="fas fa-file-export fa-lg"></i>
                                    </div>
                                    <div class="fw-medium">数据导出</div>
                                    <small>导出统计报告</small>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="row mb-4">
                    <div class="col-lg-8">
                        <div class="card">
                            <div class="card-header">
                                <span>关键指标趋势</span>
                                <div class="dropdown">
                                    <button class="btn btn-sm btn-outline-secondary dropdown-toggle" type="button">
                                        最近7天
                                    </button>
                                </div>
                            </div>
                            <div class="card-body">
                                <div id="trendChart" class="chart-container"></div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4">
                        <div class="card">
                            <div class="card-header">
                                <span>传感器状态</span>
                            </div>
                            <div class="card-body">
                                <div id="sensorStatusChart" class="chart-container"></div>
                                <div class="small text-muted text-center mt-2">
                                    总计 126 个传感器
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="row">
                    <div class="col-lg-4">
                        <div class="card">
                            <div class="card-header">
                                <span>监测数据类型分布</span>
                            </div>
                            <div class="card-body">
                                <div id="dataDistributionChart" class="chart-container"></div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-8">
                        <div class="card">
                            <div class="card-header">
                                <span>近期异常警报</span>
                                <a href="#" class="btn btn-sm btn-outline-primary">查看全部</a>
                            </div>
                            <div class="card-body p-0">
                                <div class="table-responsive">
                                    <table class="table table-hover mb-0">
                                        <thead>
                                            <tr>
                                                <th>时间</th>
                                                <th>站点</th>
                                                <th>传感器</th>
                                                <th>类型</th>
                                                <th>状态</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td>2023-10-15 09:23</td>
                                                <td>钱塘江站</td>
                                                <td>VOC传感器</td>
                                                <td>数值异常</td>
                                                <td><span class="badge bg-danger">未处理</span></td>
                                            </tr>
                                            <tr>
                                                <td>2023-10-14 15:47</td>
                                                <td>西湖站</td>
                                                <td>PM2.5传感器</td>
                                                <td>数值异常</td>
                                                <td><span class="badge bg-warning">处理中</span></td>
                                            </tr>
                                            <tr>
                                                <td>2023-10-14 10:12</td>
                                                <td>运河站</td>
                                                <td>温度传感器</td>
                                                <td>连接中断</td>
                                                <td><span class="badge bg-success">已解决</span></td>
                                            </tr>
                                            <tr>
                                                <td>2023-10-12 08:35</td>
                                                <td>湘湖站</td>
                                                <td>湿度传感器</td>
                                                <td>校准错误</td>
                                                <td><span class="badge bg-success">已解决</span></td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <!-- 原始数据内容 -->
            <section id="raw-data" class="content-section">
                <h2 class="mb-4">原始数据查看</h2>
                <!-- 原始数据内容将在脚本中动态填充 -->
            </section>

            <!-- 统计数据内容 -->
            <section id="statistics" class="content-section">
                <h2 class="mb-4">统计数据查看</h2>
                <!-- 统计数据内容将在脚本中动态填充 -->
            </section>

            <!-- 数据分析内容 -->
            <section id="analysis" class="content-section">
                <h2 class="mb-4">数据分析</h2>
                <div class="card mb-4">
                    <div class="card-header">
                        <span>分析类型选择</span>
                    </div>
                    <div class="card-body">
                        <div class="analysis-type-selector btn-group w-100">
                            <button class="btn btn-outline-primary active" data-analysis="correlation">相关性分析</button>
                            <button class="btn btn-outline-primary" data-analysis="trend">趋势对比分析</button>
                            <button class="btn btn-outline-primary" data-analysis="forecast">预测分析</button>
                            <button class="btn btn-outline-primary" data-analysis="anomaly">异常检测分析</button>
                        </div>
                    </div>
                </div>
                
                <!-- 各类分析内容容器 -->
                <div id="analysis-content">
                    <!-- 相关性分析内容 -->
                    <div id="correlation-analysis" class="analysis-content-section active">
                        <!-- 相关性分析内容将在脚本中动态填充 -->
                    </div>
                    
                    <!-- 趋势对比分析内容 -->
                    <div id="trend-analysis" class="analysis-content-section">
                        <!-- 趋势对比分析内容将在脚本中动态填充 -->
                    </div>
                    
                    <!-- 预测分析内容 -->
                    <div id="forecast-analysis" class="analysis-content-section">
                        <!-- 预测分析内容将在脚本中动态填充 -->
                    </div>
                    
                    <!-- 异常检测分析内容 -->
                    <div id="anomaly-analysis" class="analysis-content-section">
                        <!-- 异常检测分析内容将在脚本中动态填充 -->
                    </div>
                </div>
            </section>

            <!-- 数据标定内容 -->
            <section id="calibration" class="content-section">
                <h2 class="mb-4">数据标定</h2>
                <!-- 数据标定内容将在脚本中动态填充 -->
            </section>

            <!-- 系统设置内容 -->
            <section id="settings" class="content-section">
                <h2 class="mb-4">系统设置</h2>
                <!-- 系统设置内容将在脚本中动态填充 -->
            </section>
        </div>
    </div>

    <!-- Bootstrap JS 依赖 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 初始化内容
            initializeContent();
            
            // 为导航项添加点击事件
            document.querySelectorAll('.nav-link').forEach(link => {
                link.addEventListener('click', function() {
                    const sectionId = this.getAttribute('data-section');
                    showSection(sectionId);
                });
            });
            
            // 为分析类型选择器添加点击事件
            document.querySelectorAll('.analysis-type-selector .btn').forEach(btn => {
                btn.addEventListener('click', function() {
                    const analysisType = this.getAttribute('data-analysis');
                    showAnalysisSection(analysisType);
                    
                    // 更新按钮状态
                    document.querySelectorAll('.analysis-type-selector .btn').forEach(b => {
                        b.classList.remove('active');
                    });
                    this.classList.add('active');
                });
            });
            
            // 使用MutationObserver监听DOM变化，确保图表正确渲染
            const observer = new MutationObserver(function(mutations) {
                mutations.forEach(function(mutation) {
                    if (mutation.type === 'attributes' && 
                        (mutation.target.classList.contains('content-section') || 
                         mutation.target.classList.contains('analysis-content-section'))) {
                        // 如果变化的是内容区域的显示状态
                        if (mutation.target.classList.contains('active')) {
                            // 如果变为显示状态，重新渲染其中的图表
                            setTimeout(function() {
                                const chartContainers = mutation.target.querySelectorAll('.chart-container');
                                chartContainers.forEach(container => {
                                    const chart = echarts.getInstanceByDom(container);
                                    if (chart) {
                                        chart.resize();
                                    }
                                });
                            }, 100);
                        }
                    }
                });
            });
            
            // 监听所有可能包含图表的容器
            document.querySelectorAll('.content-section, .analysis-content-section').forEach(section => {
                observer.observe(section, { attributes: true, attributeFilter: ['class'] });
            });
            
            // 新增：页面加载完成后，添加额外的初始化调用
            console.log('DOM内容加载完成，进行额外的初始化');
            
            // 使用强化版初始化函数
            setTimeout(() => {
                console.log('DOM加载完成后强制重新初始化所有图表 - 使用强化版');
                initializeChartsEnhanced();
                
                // 如果在数据分析页面，确保相关图表显示
                const analysisSection = document.getElementById('analysis');
                if (analysisSection && analysisSection.classList.contains('active')) {
                    const activeAnalysisButton = document.querySelector('.analysis-type-selector .btn.active');
                    if (activeAnalysisButton) {
                        const analysisType = activeAnalysisButton.getAttribute('data-analysis');
                        console.log(`页面加载后，发现活跃的分析类型: ${analysisType}`);
                        // 显式调用一次以确保图表初始化
                        showAnalysisSection(analysisType);
                    }
                }
            }, 1000);
        });
        
        // 显示指定部分
        function showSection(sectionId) {
            // 更新导航链接状态
            document.querySelectorAll('.nav-link').forEach(link => {
                link.classList.remove('active');
            });
            document.querySelector(`.nav-link[data-section="${sectionId}"]`).classList.add('active');
            
            // 隐藏所有内容区域
            document.querySelectorAll('.content-section').forEach(section => {
                section.classList.remove('active');
            });
            
            // 显示选择的内容区域
            const selectedSection = document.getElementById(sectionId);
            if (selectedSection) {
                selectedSection.classList.add('active');
                
                // 重新渲染该区域内的图表
                resizeChartsInSection(sectionId);
                
                // 如果是分析页面，需要特殊处理
                if (sectionId === 'analysis') {
                    // 找到当前选中的分析类型
                    const activeAnalysisButton = document.querySelector('.analysis-type-selector .btn.active');
                    if (activeAnalysisButton) {
                        const analysisType = activeAnalysisButton.getAttribute('data-analysis');
                        // 显式调用一次以确保图表初始化
                        showAnalysisSection(analysisType);
                    }
                }
                
                // 如果是原始数据页面，重新初始化原始数据图表
                if (sectionId === 'raw-data') {
                    console.log('检测到原始数据页面，重新初始化rawDataChart');
                    setTimeout(() => {
                        // 使用新的初始化方法
                        initializeRawDataChart();
                    }, 200);
                }
            }
            
            // 更新面包屑
            updateBreadcrumb(sectionId);
        }
        
        // 显示指定分析类型
        function showAnalysisSection(analysisType) {
            console.log(`showAnalysisSection called: ${analysisType}`);
            
            // 更新分析内容显示
            document.querySelectorAll('.analysis-content-section').forEach(section => {
                section.classList.remove('active');
            });
            
            const targetSection = document.getElementById(`${analysisType}-analysis`);
            if (targetSection) {
                targetSection.classList.add('active');
                console.log(`分析内容区域 ${analysisType}-analysis 已激活`);
            } else {
                console.error(`找不到分析内容区域: ${analysisType}-analysis`);
            }
            
            console.log(`切换到分析页面: ${analysisType}-analysis`);
            
            // 根据不同的分析类型初始化对应的图表
            setTimeout(() => {
                let chartInitialized = false;
                try {
                    if (analysisType === 'correlation') {
                        const chartElement = document.getElementById('correlationScatterChart');
                        console.log(`correlationScatterChart 元素: ${chartElement ? '存在' : '不存在'}`);
                        if (chartElement) {
                            // 手动设置尺寸
                            chartElement.style.width = '100%';
                            chartElement.style.height = '350px';
                            
                            // 检查是否已有实例
                            const existingChart = echarts.getInstanceByDom(chartElement);
                            if (existingChart) {
                                console.log('发现已有的相关性图表实例，销毁它');
                                existingChart.dispose();
                            }
                            
                            // 创建新实例
                            console.log('创建新的相关性图表实例');
                            const chart = echarts.init(chartElement);
                            const option = getCorrelationScatterChartOption();
                            console.log('相关性图表配置:', JSON.stringify(option).substring(0, 100) + '...');
                            chart.setOption(option);
                            console.log('相关性散点图初始化成功');
                            chartInitialized = true;
                            
                            // 防止图表未显示，强制重绘
                            setTimeout(() => {
                                chart.resize();
                                console.log('强制重绘相关性图表');
                            }, 500);
                        }
                    } else if (analysisType === 'trend') {
                        const chartElement = document.getElementById('trendComparisonChart');
                        console.log(`trendComparisonChart 元素: ${chartElement ? '存在' : '不存在'}`);
                        if (chartElement) {
                            // 手动设置尺寸
                            chartElement.style.width = '100%';
                            chartElement.style.height = '400px';
                            
                            // 检查是否已有实例
                            const existingChart = echarts.getInstanceByDom(chartElement);
                            if (existingChart) {
                                existingChart.dispose();
                            }
                            
                            // 创建新实例
                            const chart = echarts.init(chartElement);
                            chart.setOption(getTrendComparisonChartOption());
                            console.log('趋势对比图初始化成功');
                            chartInitialized = true;
                            
                            // 防止图表未显示，强制重绘
                            setTimeout(() => {
                                chart.resize();
                            }, 500);
                        }
                    } else if (analysisType === 'forecast') {
                        const chartElement = document.getElementById('forecastChart');
                        console.log(`forecastChart 元素: ${chartElement ? '存在' : '不存在'}`);
                        if (chartElement) {
                            // 手动设置尺寸
                            chartElement.style.width = '100%';
                            chartElement.style.height = '350px';
                            
                            // 检查是否已有实例
                            const existingChart = echarts.getInstanceByDom(chartElement);
                            if (existingChart) {
                                existingChart.dispose();
                            }
                            
                            // 创建并显示一个简单的图表测试
                            const chart = echarts.init(chartElement);
                            // 使用一个简单的测试配置
                            chart.setOption({
                                title: { text: '预测数据测试' },
                                tooltip: { trigger: 'axis' },
                                legend: { data: ['测试数据'] },
                                xAxis: { type: 'category', data: ['一', '二', '三', '四', '五', '六', '七'] },
                                yAxis: { type: 'value' },
                                series: [{
                                    name: '测试数据',
                                    type: 'line',
                                    data: [120, 132, 101, 134, 90, 230, 210]
                                }]
                            });
                            console.log('预测图表测试初始化成功');
                            chartInitialized = true;
                            
                            // 防止图表未显示，强制重绘
                            setTimeout(() => {
                                chart.resize();
                            }, 500);
                        }
                    } else if (analysisType === 'anomaly') {
                        const detectionChartElement = document.getElementById('anomalyDetectionChart');
                        console.log(`anomalyDetectionChart 元素: ${detectionChartElement ? '存在' : '不存在'}`);
                        if (detectionChartElement) {
                            // 手动设置尺寸
                            detectionChartElement.style.width = '100%';
                            detectionChartElement.style.height = '400px';
                            
                            // 检查是否已有实例
                            const existingChart = echarts.getInstanceByDom(detectionChartElement);
                            if (existingChart) {
                                existingChart.dispose();
                            }
                            
                            // 创建新实例
                            const chart = echarts.init(detectionChartElement);
                            chart.setOption(getAnomalyDetectionChartOption());
                            console.log('异常检测图表初始化成功');
                            chartInitialized = true;
                            
                            // 防止图表未显示，强制重绘
                            setTimeout(() => {
                                chart.resize();
                            }, 500);
                        }
                        
                        const historyChartElement = document.getElementById('anomalyHistoryChart');
                        if (historyChartElement) {
                            // 手动设置尺寸
                            historyChartElement.style.width = '100%';
                            historyChartElement.style.height = '350px';
                            
                            // 检查是否已有实例
                            const existingChart = echarts.getInstanceByDom(historyChartElement);
                            if (existingChart) {
                                existingChart.dispose();
                            }
                            const chart = echarts.init(historyChartElement);
                            chart.setOption(getAnomalyHistoryChartOption());
                            console.log('异常历史对比图表初始化成功');
                            chartInitialized = true;
                            
                            // 防止图表未显示，强制重绘
                            setTimeout(() => {
                                chart.resize();
                            }, 500);
                        }
                    }
                    
                    if (!chartInitialized) {
                        console.warn(`没有为分析类型 ${analysisType} 初始化任何图表`);
                    }
                } catch (error) {
                    console.error('数据分析图表初始化失败:', error);
                }
            }, 200);
            
            // 延迟一小段时间后重新渲染该分析类型的图表
            setTimeout(() => {
                resizeChartsInSection(`${analysisType}-analysis`);
            }, 500);
        }
        
        // 初始化页面内容
        function initializeContent() {
            // 初始化仪表盘内容
            initializeDashboard();
            
            // 初始化原始数据内容
            initializeRawData();
            
            // 初始化统计数据内容
            initializeStatistics();
            
            // 初始化各类分析内容
            initializeCorrelationAnalysis();
            initializeTrendAnalysis();
            initializeForecastAnalysis();
            initializeAnomalyAnalysis();
            
            // 初始化数据标定内容
            initializeCalibration();
            
            // 初始化系统设置内容
            initializeSettings();
            
            // 初始化所有图表
            initializeCharts();
            
            // 添加窗口大小变化时重新渲染图表的事件监听
            window.addEventListener('resize', resizeAllCharts);
            
            // 初始化图表后，主动触发一次事件
            setTimeout(() => {
                // 获取当前活跃的内容区域
                const activeSection = document.querySelector('.content-section.active');
                if (activeSection && activeSection.id === 'analysis') {
                    console.log('初始化内容后，发现分析页面是活跃的，触发分析图表初始化');
                    // 获取当前活跃的分析类型
                    const activeAnalysisButton = document.querySelector('.analysis-type-selector .btn.active');
                    if (activeAnalysisButton) {
                        const analysisType = activeAnalysisButton.getAttribute('data-analysis');
                        console.log(`分析类型: ${analysisType}`);
                        // 显式调用一次以确保图表初始化
                        showAnalysisSection(analysisType);
                    }
                }
            }, 1000);
            
            // 为功能区域快速导航添加点击事件
            document.querySelectorAll('#dashboard .card-body .row > div > a').forEach((link, index) => {
                link.addEventListener('click', function(e) {
                    e.preventDefault();
                    
                    // 根据索引确定要跳转的部分
                    const sections = ['raw-data', 'statistics', 'analysis', 'calibration', 'settings', 'dashboard'];
                    if (index < sections.length) {
                        // 获取对应的侧边栏导航链接并触发点击
                        const navLink = document.querySelector(`.nav-link[data-section="${sections[index]}"]`);
                        if (navLink) {
                            navLink.click();
                            console.log(`通过功能区快速导航切换到: ${sections[index]}`);
                        }
                    }
                });
            });
        }

        // 重置所有图表尺寸
        function resizeAllCharts() {
            // 获取所有图表容器元素
            const chartContainers = document.querySelectorAll('.chart-container');
            
            // 遍历并重置每个图表
            chartContainers.forEach(container => {
                const chartId = container.id;
                if (chartId && echarts.getInstanceByDom(container)) {
                    echarts.getInstanceByDom(container).resize();
                }
            });
        }

        // 初始化仪表盘内容
        function initializeDashboard() {
            const dashboard = document.getElementById('dashboard');
            dashboard.innerHTML = `
                <h2 class="mb-4">环境监测概览</h2>
                <div class="row mb-4">
                    <div class="col-md-3">
                        <div class="card">
                            <div class="card-body d-flex align-items-center">
                                <div class="rounded-circle me-3 d-flex align-items-center justify-content-center" 
                                     style="width: 48px; height: 48px; background-color: rgba(24, 144, 255, 0.1);">
                                    <i class="fas fa-map-marker-alt text-primary fs-4"></i>
                                </div>
                                <div>
                                    <h6 class="text-muted mb-1">监测站点</h6>
                                    <h3 class="mb-0">18</h3>
                                    <small class="text-success"><i class="fas fa-arrow-up me-1"></i>新增 2 个站点</small>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="card">
                            <div class="card-body d-flex align-items-center">
                                <div class="rounded-circle me-3 d-flex align-items-center justify-content-center" 
                                     style="width: 48px; height: 48px; background-color: rgba(82, 196, 26, 0.1);">
                                    <i class="fas fa-microchip text-success fs-4"></i>
                                </div>
                                <div>
                                    <h6 class="text-muted mb-1">传感器数量</h6>
                                    <h3 class="mb-0">126</h3>
                                    <small class="text-success"><i class="fas fa-arrow-up me-1"></i>新增 5 个传感器</small>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="card">
                            <div class="card-body d-flex align-items-center">
                                <div class="rounded-circle me-3 d-flex align-items-center justify-content-center" 
                                     style="width: 48px; height: 48px; background-color: rgba(250, 173, 20, 0.1);">
                                    <i class="fas fa-exclamation-triangle text-warning fs-4"></i>
                                </div>
                                <div>
                                    <h6 class="text-muted mb-1">异常数据</h6>
                                    <h3 class="mb-0">7</h3>
                                    <small class="text-danger"><i class="fas fa-arrow-down me-1"></i>减少 3 个异常</small>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="card">
                            <div class="card-body d-flex align-items-center">
                                <div class="rounded-circle me-3 d-flex align-items-center justify-content-center" 
                                     style="width: 48px; height: 48px; background-color: rgba(255, 77, 79, 0.1);">
                                    <i class="fas fa-tools text-danger fs-4"></i>
                                </div>
                                <div>
                                    <h6 class="text-muted mb-1">待维护设备</h6>
                                    <h3 class="mb-0">4</h3>
                                    <small class="text-success"><i class="fas fa-arrow-up me-1"></i>新增 1 个设备</small>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="row mb-4">
                    <div class="col-lg-8">
                        <div class="card">
                            <div class="card-header">
                                <span>关键指标趋势</span>
                                <div class="dropdown">
                                    <button class="btn btn-sm btn-outline-secondary dropdown-toggle" type="button">
                                        最近7天
                                    </button>
                                </div>
                            </div>
                            <div class="card-body">
                                <div id="trendChart" class="chart-container"></div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4">
                        <div class="card">
                            <div class="card-header">
                                <span>传感器状态</span>
                            </div>
                            <div class="card-body">
                                <div id="sensorStatusChart" class="chart-container"></div>
                                <div class="small text-muted text-center mt-2">
                                    总计 126 个传感器
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="row">
                    <div class="col-lg-4">
                        <div class="card">
                            <div class="card-header">
                                <span>监测数据类型分布</span>
                            </div>
                            <div class="card-body">
                                <div id="dataDistributionChart" class="chart-container"></div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-8">
                        <div class="card">
                            <div class="card-header">
                                <span>近期异常警报</span>
                                <a href="#" class="btn btn-sm btn-outline-primary">查看全部</a>
                            </div>
                            <div class="card-body p-0">
                                <div class="table-responsive">
                                    <table class="table table-hover mb-0">
                                        <thead>
                                            <tr>
                                                <th>时间</th>
                                                <th>站点</th>
                                                <th>传感器</th>
                                                <th>类型</th>
                                                <th>状态</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td>2023-10-15 09:23</td>
                                                <td>钱塘江站</td>
                                                <td>VOC传感器</td>
                                                <td>数值异常</td>
                                                <td><span class="badge bg-danger">未处理</span></td>
                                            </tr>
                                            <tr>
                                                <td>2023-10-14 15:47</td>
                                                <td>西湖站</td>
                                                <td>PM2.5传感器</td>
                                                <td>数值异常</td>
                                                <td><span class="badge bg-warning">处理中</span></td>
                                            </tr>
                                            <tr>
                                                <td>2023-10-14 10:12</td>
                                                <td>运河站</td>
                                                <td>温度传感器</td>
                                                <td>连接中断</td>
                                                <td><span class="badge bg-success">已解决</span></td>
                                            </tr>
                                            <tr>
                                                <td>2023-10-12 08:35</td>
                                                <td>湘湖站</td>
                                                <td>湿度传感器</td>
                                                <td>校准错误</td>
                                                <td><span class="badge bg-success">已解决</span></td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            `;
        }

        // 初始化原始数据内容
        function initializeRawData() {
            const rawData = document.getElementById('raw-data');
            rawData.innerHTML = `
                <h2 class="mb-4">原始数据查看</h2>
                <div class="card mb-4">
                    <div class="card-header">
                        <span>数据筛选</span>
                    </div>
                    <div class="card-body">
                        <form>
                            <div class="row g-3">
                                <div class="col-md-3">
                                    <label class="form-label">监测站</label>
                                    <select class="form-select">
                                        <option>钱塘江站</option>
                                        <option>西湖站</option>
                                        <option>运河站</option>
                                        <option>湘湖站</option>
                                    </select>
                                </div>
                                <div class="col-md-3">
                                    <label class="form-label">传感器</label>
                                    <select class="form-select">
                                        <option>温湿度传感器</option>
                                        <option>气象站</option>
                                    </select>
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label">时间范围</label>
                                    <div class="input-group">
                                        <input type="date" class="form-control" value="2023-10-10">
                                        <span class="input-group-text">至</span>
                                        <input type="date" class="form-control" value="2023-10-15">
                                    </div>
                                </div>
                                <div class="col-md-2 d-flex align-items-end">
                                    <button type="button" class="btn btn-primary w-100">查询</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
                
                <div class="card mb-4">
                    <div class="card-header">
                        <span>温度趋势</span>
                      
                    </div>
                    <div class="card-body">
                        <div class="mb-3">
                            <label class="form-label">选择显示的参数：</label>
                            <div class="d-flex flex-wrap">
                                <div class="form-check me-3">
                                    <input class="form-check-input parameter-toggle" type="checkbox" value="temp" id="paramTemp" checked data-chart="rawDataChart">
                                    <label class="form-check-label" for="paramTemp">温度 (°C)</label>
                                </div>
                                <div class="form-check me-3">
                                    <input class="form-check-input parameter-toggle" type="checkbox" value="hum" id="paramHum" data-chart="rawDataChart">
                                    <label class="form-check-label" for="paramHum">湿度 (%)</label>
                                </div>
                                <div class="form-check me-3">
                                    <input class="form-check-input parameter-toggle" type="checkbox" value="pressure" id="paramPressure" data-chart="rawDataChart">
                                    <label class="form-check-label" for="paramPressure">气压 (hPa)</label>
                                </div>
                            </div>
                        </div>
                        <div id="rawDataChart" class="chart-container"></div>
                    </div>
                </div>
                
                <div class="card">
                    <div class="card-header">
                        <span>数据列表</span>
                        <div>
                            <button class="btn btn-sm btn-outline-primary me-2">
                                <i class="fas fa-download me-1"></i>导出
                            </button>
                            <button class="btn btn-sm btn-outline-secondary">
                                <i class="fas fa-filter me-1"></i>更多筛选
                            </button>
                        </div>
                    </div>
                    <div class="card-body p-0">
                        <div class="table-responsive">
                            <table class="table table-hover mb-0">
                                <thead>
                                    <tr>
                                        <th>时间</th>
                                        <th>站点</th>
                                        <th>温度</th>
                                        <th>湿度</th>
                                        <th>气压</th>
                               
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>2023-10-15 10:00</td>
                                        <td>钱塘江站</td>
                                        <td>23.5</td>
                                        <td>55</td>
                                        <td>1.1</td>
                                       
                                    </tr>
                                    <tr>
                                        <td>2023-10-15 09:45</td>
                                        <td>钱塘江站</td>
                                        <td>23.5</td>
                                        <td>55</td>
                                        <td>1.1</td>
                                      
                                    </tr>
                                    <tr>
                                        <td>2023-10-15 09:30</td>
                                        <td>钱塘江站</td>
                                        <td>23.5</td>
                                        <td>55</td>
                                        <td>1.1</td>
                                     
                                    </tr>
                                    <tr>
                                        <td>2023-10-15 09:15</td>
                                        <td>钱塘江站</td>
                                        <td>23.5</td>
                                        <td>55</td>
                                        <td>1.1</td>
                                      
                                    </tr>
                                    <tr>
                                        <td>2023-10-15 09:00</td>
                                        <td>钱塘江站</td>
                                        <td>23.5</td>
                                        <td>55</td>
                                        <td>1.1</td>
                                        
                                    </tr>
                                    <tr>
                                        <td>2023-10-15 08:45</td>
                                        <td>钱塘江站</td>
                                        <td>23.5</td>
                                        <td>55</td>
                                        <td>1.1</td>
                                       
                                    </tr>
                                    <tr>
                                        <td>2023-10-15 08:30</td>
                                        <td>钱塘江站</td>
                                        <td>23.5</td>
                                        <td>55</td>
                                        <td>1.1</td>
                                       
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="card-footer text-center">
                        <nav>
                            <ul class="pagination justify-content-center mb-0">
                                <li class="page-item disabled">
                                    <a class="page-link" href="#" tabindex="-1">上一页</a>
                                </li>
                                <li class="page-item active"><a class="page-link" href="#">1</a></li>
                                <li class="page-item"><a class="page-link" href="#">2</a></li>
                                <li class="page-item"><a class="page-link" href="#">3</a></li>
                                <li class="page-item">
                                    <a class="page-link" href="#">下一页</a>
                                </li>
                            </ul>
                        </nav>
                    </div>
                </div>
            `;
        }

        // 初始化统计数据内容
        function initializeStatistics() {
            const statistics = document.getElementById('statistics');
            statistics.innerHTML = `
                <h2 class="mb-4">统计数据查看</h2>
                <div class="card mb-4">
                    <div class="card-header">
                        <span>数据筛选</span>
                    </div>
                    <div class="card-body">
                        <form>
                            <div class="row g-3">
                                <div class="col-md-2">
                                    <label class="form-label">监测站点</label>
                                    <select class="form-select">
                                        <option>钱塘江站</option>
                                        <option>西湖站</option>
                                        <option>运河站</option>
                                        <option>湘湖站</option>
                                    </select>
                                </div>
                                <div class="col-md-2">
                                    <label class="form-label">传感器</label>
                                    <select class="form-select">
                                        <option>温湿度传感器</option>
                                        <option>气象站</option>
                                    </select>
                                </div>
                                   <div class="col-md-4">
                                    <label class="form-label">环境参数</label>
                                    <select class="form-select">
                                        <option>温度</option>
                                        <option>湿度</option>
                                        <option>PM2.5</option>
                                        <option>PM10</option>
                                        <option>VOC</option>
                                        <option>CO2</option>
                                    </select>
                                </div>
                                <div class="col-md-3">
                                    <label class="form-label">时间粒度</label>
                                    <select class="form-select">
                                        <option>半小时</option>
                                        <option>小时</option>
                                        <option>天</option>
                                        <option>周</option>
                                        <option>月</option>
                                        <option>年</option>
                                    </select>
                                </div>
                                <div class="col-md-3">
                                    <label class="form-label">时间范围</label>
                                    <div class="input-group">
                                        <input type="date" class="form-control" value="2023-09-15">
                                        <span class="input-group-text">至</span>
                                        <input type="date" class="form-control" value="2023-10-15">
                                    </div>
                                </div>
                                <div class="col-md-2 d-flex align-items-end">
                                    <button type="button" class="btn btn-primary w-100">统计</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
                
                <div class="row mb-4">
                    <div class="col-md-3">
                        <div class="card">
                            <div class="card-body text-center">
                                <h6 class="text-muted mb-2">平均值</h6>
                                <h2 class="mb-0">24.6°C</h2>
                                <div class="small text-muted">过去30天</div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="card">
                            <div class="card-body text-center">
                                <h6 class="text-muted mb-2">最高值</h6>
                                <h2 class="mb-0">32.8°C</h2>
                                <div class="small text-muted">2023-09-25 14:30</div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="card">
                            <div class="card-body text-center">
                                <h6 class="text-muted mb-2">最低值</h6>
                                <h2 class="mb-0">18.2°C</h2>
                                <div class="small text-muted">2023-10-10 05:15</div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="card">
                            <div class="card-body text-center">
                                <h6 class="text-muted mb-2">标准差</h6>
                                <h2 class="mb-0">3.24°C</h2>
                                <div class="small text-muted">数据离散程度</div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="row">
                    <div class="col-lg-8">
                        <div class="card mb-4">
                            <div class="card-header">
                                <span>统计趋势</span>
                                <div class="dropdown">
                                    <button class="btn btn-sm btn-outline-secondary dropdown-toggle" type="button">
                                        按天
                                    </button>
                                </div>
                            </div>
                            <div class="card-body">
                                <div id="statisticsChart" class="chart-container"></div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4">
                        <div class="card mb-4">
                            <div class="card-header">
                                <span>数据分布</span>
                            </div>
                            <div class="card-body">
                                <div id="distributionChart" class="chart-container"></div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="card">
                    <div class="card-header">
                        <span>统计数据表</span>
                        <button class="btn btn-sm btn-outline-primary">
                            <i class="fas fa-download me-1"></i>导出
                        </button>
                    </div>
                    <div class="card-body p-0">
                        <div class="table-responsive">
                            <table class="table table-hover mb-0">
                                <thead>
                                    <tr>
                                        <th>时间段</th>
                                        <th>最小值</th>
                                        <th>最大值</th>
                                        <th>平均值</th>
                                        <th>中位数</th>
                                        <th>标准差</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>2023-10-15</td>
                                        <td>19.8°C</td>
                                        <td>26.5°C</td>
                                        <td>23.2°C</td>
                                        <td>23.5°C</td>
                                        <td>2.1°C</td>
                                    </tr>
                                    <tr>
                                        <td>2023-10-14</td>
                                        <td>18.9°C</td>
                                        <td>27.3°C</td>
                                        <td>23.8°C</td>
                                        <td>24.2°C</td>
                                        <td>2.4°C</td>
                                    </tr>
                                    <tr>
                                        <td>2023-10-13</td>
                                        <td>19.2°C</td>
                                        <td>28.1°C</td>
                                        <td>24.5°C</td>
                                        <td>25.0°C</td>
                                        <td>2.6°C</td>
                                    </tr>
                                    <tr>
                                        <td>2023-10-12</td>
                                        <td>20.1°C</td>
                                        <td>29.4°C</td>
                                        <td>25.2°C</td>
                                        <td>25.8°C</td>
                                        <td>2.7°C</td>
                                    </tr>
                                    <tr>
                                        <td>2023-10-11</td>
                                        <td>19.5°C</td>
                                        <td>28.7°C</td>
                                        <td>24.8°C</td>
                                        <td>25.3°C</td>
                                        <td>2.5°C</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="card-footer text-center">
                        <nav>
                            <ul class="pagination justify-content-center mb-0">
                                <li class="page-item disabled">
                                    <a class="page-link" href="#" tabindex="-1">上一页</a>
                                </li>
                                <li class="page-item active"><a class="page-link" href="#">1</a></li>
                                <li class="page-item"><a class="page-link" href="#">2</a></li>
                                <li class="page-item"><a class="page-link" href="#">3</a></li>
                                <li class="page-item">
                                    <a class="page-link" href="#">下一页</a>
                                </li>
                            </ul>
                        </nav>
                    </div>
                </div>
            `;
        }

        // 初始化相关性分析内容
        function initializeCorrelationAnalysis() {
            const correlationAnalysis = document.getElementById('correlation-analysis');
            correlationAnalysis.innerHTML = `
                <div class="card mb-4">
                    <div class="card-header">
                        <span>相关性分析配置</span>
                    </div>
                    <div class="card-body">
                        <form>
                            <div class="row g-3">
                                <div class="col-md-4">
                                    <label class="form-label">变量X</label>
                                    <select class="form-select">
                                        <option>监测站点1-温湿度传感器-温度</option>
                                  
                                    </select>
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label">变量Y</label>
                                    <select class="form-select">
                                           <option>监测站点1-温湿度传感器-湿度</option>
                                    </select>
                                </div>
                                <div class="col-md-2">
                                    <label class="form-label">时间范围</label>
                                 

                                    <div class="input-group">
                                        <input type="date" class="form-control" value="2023-10-10">
                                        <span class="input-group-text">至</span>
                                        <input type="date" class="form-control" value="2024-10-10">

                                    
                                </div>
                                <div class="col-md-2 d-flex align-items-end">
                                    <button type="button" class="btn btn-primary w-100">分析</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
                
                <div class="row">
                    <div class="col-lg-8">
                        <div class="card">
                            <div class="card-header">
                                <span>相关性散点图</span>
                            </div>
                            <div class="card-body">
                                <div id="correlationScatterChart" class="chart-container" style="width:100%; height:350px; min-height:300px;"></div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4">
                        <div class="card">
                            <div class="card-header">
                                <span>相关性统计</span>
                            </div>
                            <div class="card-body">
                                <div class="mb-4">
                                    <div class="d-flex justify-content-between mb-2">
                                        <span>皮尔逊相关系数 (r)</span>
                                        <span>-0.78</span>
                                    </div>
                                    <div class="progress">
                                        <div class="progress-bar bg-danger" role="progressbar" style="width: 78%" aria-valuenow="78" aria-valuemin="0" aria-valuemax="100"></div>
                                    </div>
                                    <div class="small text-muted mt-2">强负相关，表明随着PM2.5的升高，PM10通常会下降</div>
                                </div>
                                
                                <table class="table table-sm">
                                    <tbody>
                                        <tr>
                                            <th>决定系数 (R²)</th>
                                            <td>0.61</td>
                                        </tr>
                                        <tr>
                                            <th>样本数量</th>
                                            <td>168</td>
                                        </tr>
                                    
                                        <tr>
                                            <th>斜率</th>
                                            <td>-2.34</td>
                                        </tr>
                                        <tr>
                                            <th>截距</th>
                                            <td>105.6</td>
                                        </tr>
                                    </tbody>
                                </table>
                                
                                <div class="alert alert-info mt-3 mb-0">
                                    <h6 class="alert-heading mb-2">分析结论</h6>
                                    <p class="mb-0">PM2.5与PM10之间存在显著的负相关关系，PM2.5每升高1μg/m³，PM10平均下降约2.34μg/m³。该模型可以解释约61%的PM10变化。</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            `;
            
            // 延迟一下再初始化图表，确保DOM已经更新
            setTimeout(() => {
                try {
                    console.log("尝试初始化相关性散点图");
                    const chartElement = document.getElementById("correlationScatterChart");
                    
                    // 显示一些调试信息
                    console.log("相关性散点图容器存在:", !!chartElement);
                    if (chartElement) {
                        console.log("相关性散点图容器尺寸:", chartElement.offsetWidth, chartElement.offsetHeight);
                        
                        // 检查是否已有实例并销毁
                        const existingChart = echarts.getInstanceByDom(chartElement);
                        if (existingChart) {
                            existingChart.dispose();
                        }
                        
                        // 创建一个简单的测试散点图
                        const chart = echarts.init(chartElement);
                        chart.setOption({
                            title: {
                                text: 'PM2.5与PM10相关性'
                            },
                            tooltip: {
                                trigger: 'item',
                                formatter: function(params) {
                                    return 'PM2.5: ' + params.value[0] + ' μg/m³<br>PM10: ' + params.value[1] + ' μg/m³';
                                }
                            },
                            xAxis: {
                                type: 'value',
                                name: 'PM2.5 (μg/m³)'
                            },
                            yAxis: {
                                type: 'value',
                                name: 'PM10 (μg/m³)'
                            },
                            series: [{
                                type: 'scatter',
                                data: [
                                    [15, 90], [16, 87], [17, 85], [18, 83], [19, 81],
                                    [20, 79], [21, 75], [22, 72], [23, 69], [24, 66],
                                    [25, 63], [26, 59], [27, 56], [28, 52], [29, 48],
                                    [30, 44], [31, 40], [32, 36], [33, 32], [34, 28]
                                ],
                                markLine: {
                                    data: [
                                        {
                                            type: 'linear',
                                            xAxis: 15,
                                            yAxis: 90,
                                            x2: 35,
                                            y2: 22,
                                            label: {
                                                formatter: 'y = -2.34x + 105.6'
                                            }
                                        }
                                    ]
                                },
                                itemStyle: {
                                    color: '#1890ff'
                                }
                            }]
                        });
                        console.log("相关性散点图初始化完成");
                    }
                } catch (error) {
                    console.error("初始化相关性散点图失败:", error);
                }
            }, 500);
        }
        
        // 初始化趋势对比分析内容
        function initializeTrendAnalysis() {
            const trendAnalysis = document.getElementById('trend-analysis');
            trendAnalysis.innerHTML = `
                <div class="card mb-4">
                    <div class="card-header">
                        <span>趋势对比分析配置</span>
                    </div>
                    <div class="card-body">
                        <form>
                            <div class="row g-3">
                                <div class="col-md-3">
                                    <label class="form-label">数据指标</label>
                                    <div class="d-flex flex-column">
                                        <div class="form-check mb-2">
                                            <input class="form-check-input" type="checkbox" checked id="checkPM25">
                                            <label class="form-check-label" for="checkPM25">PM2.5 (μg/m³)</label>
                                        </div>
                                        <div class="form-check mb-2">
                                            <input class="form-check-input" type="checkbox" checked id="checkPM10">
                                            <label class="form-check-label" for="checkPM10">PM10 (μg/m³)</label>
                                        </div>
                                        <div class="form-check mb-2">
                                            <input class="form-check-input" type="checkbox" id="checkTemp">
                                            <label class="form-check-label" for="checkTemp">温度 (°C)</label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" id="checkHumidity">
                                            <label class="form-check-label" for="checkHumidity">湿度 (%)</label>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <label class="form-label">站点选择</label>
                                    <div class="d-flex flex-column">
                                        <div class="form-check mb-2">
                                            <input class="form-check-input" type="checkbox" checked id="checkStation1">
                                            <label class="form-check-label" for="checkStation1">钱塘江站</label>
                                        </div>
                                        <div class="form-check mb-2">
                                            <input class="form-check-input" type="checkbox" checked id="checkStation2">
                                            <label class="form-check-label" for="checkStation2">西湖站</label>
                                        </div>
                                        <div class="form-check mb-2">
                                            <input class="form-check-input" type="checkbox" id="checkStation3">
                                            <label class="form-check-label" for="checkStation3">运河站</label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" id="checkStation4">
                                            <label class="form-check-label" for="checkStation4">湘湖站</label>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label">时间范围</label>
                                    <div class="input-group mb-3">
                                        <input type="date" class="form-control" value="2023-09-15">
                                        <span class="input-group-text">至</span>
                                        <input type="date" class="form-control" value="2023-10-15">
                                    </div>
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" id="checkCompareLastYear">
                                        <label class="form-check-label" for="checkCompareLastYear">
                                            与去年同期对比
                                        </label>
                                    </div>
                                </div>
                                <div class="col-md-2 d-flex align-items-end">
                                    <button type="button" class="btn btn-primary w-100">生成对比</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
                
                <div class="card mb-4">
                    <div class="card-header">
                        <span>趋势对比图</span>
                        <div class="dropdown">
                            <button class="btn btn-sm btn-outline-secondary dropdown-toggle" type="button">
                                按日查看
                            </button>
                        </div>
                    </div>
                    <div class="card-body">
                        <div id="trendComparisonChart" class="chart-container" style="width:100%; height:400px; min-height:350px;"></div>
                    </div>
                </div>
                
                <div class="card">
                    <div class="card-header">
                        <span>趋势分析结论</span>
                    </div>
                    <div class="card-body">
                        <div class="alert alert-info mb-3">
                            <h6 class="alert-heading">主要发现</h6>
                            <p>PM2.5与PM10浓度在西湖站和钱塘江站均呈现相似趋势，但钱塘江站的平均浓度水平高出西湖站约25%。</p>
                        </div>
                        
                        <div class="row">
                            <div class="col-md-6">
                                <div class="card mb-3">
                                    <div class="card-header bg-light">
                                        <h6 class="mb-0">钱塘江站分析</h6>
                                    </div>
                                    <div class="card-body">
                                        <ul class="mb-0">
                                            <li>PM2.5平均浓度: 38.6 μg/m³</li>
                                            <li>PM10平均浓度: 75.3 μg/m³</li>
                                            <li>PM2.5/PM10比值: 0.51</li>
                                            <li>周末浓度降低: 18.2%</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="card mb-3">
                                    <div class="card-header bg-light">
                                        <h6 class="mb-0">西湖站分析</h6>
                                    </div>
                                    <div class="card-body">
                                        <ul class="mb-0">
                                            <li>PM2.5平均浓度: 31.2 μg/m³</li>
                                            <li>PM10平均浓度: 62.7 μg/m³</li>
                                            <li>PM2.5/PM10比值: 0.50</li>
                                            <li>周末浓度降低: 22.5%</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            <div class="col-12">
                                <div class="card">
                                    <div class="card-header bg-light">
                                        <h6 class="mb-0">趋势特征总结</h6>
                                    </div>
                                    <div class="card-body">
                                        <ol class="mb-0">
                                            <li>工作日浓度高峰出现在早7-9点和晚5-7点，与交通高峰相符</li>
                                            <li>相比去年同期，PM2.5平均浓度下降12.5%，PM10下降8.7%</li>
                                            <li>钱塘江站周一至周五浓度变化较大，西湖站相对稳定</li>
                                            <li>降雨天气后（10月5-7日）两站浓度明显降低，降幅约40%</li>
                                        </ol>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            `;
            
            // 延迟一下再初始化图表，确保DOM已经更新
            setTimeout(() => {
                try {
                    console.log("尝试初始化趋势对比图");
                    const chartElement = document.getElementById("trendComparisonChart");
                    
                    if (chartElement) {
                        console.log("趋势对比图容器尺寸:", chartElement.offsetWidth, chartElement.offsetHeight);
                        
                        // 检查是否已有实例并销毁
                        const existingChart = echarts.getInstanceByDom(chartElement);
                        if (existingChart) {
                            existingChart.dispose();
                        }
                        
                        // 创建一个简单的测试线图
                        const chart = echarts.init(chartElement);
                        chart.setOption({
                            title: { text: '不同站点污染物浓度对比' },
                            tooltip: {
                                trigger: 'axis'
                            },
                            legend: {
                                data: ['钱塘江站 PM2.5', '钱塘江站 PM10', '西湖站 PM2.5', '西湖站 PM10']
                            },
                            grid: {
                                left: '3%',
                                right: '4%',
                                bottom: '3%',
                                containLabel: true
                            },
                            xAxis: {
                                type: 'category',
                                boundaryGap: false,
                                data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
                            },
                            yAxis: {
                                type: 'value',
                                name: '浓度 (μg/m³)',
                                axisLabel: {
                                    formatter: '{value} μg/m³'
                                }
                            },
                            series: [
                                {
                                    name: '钱塘江站 PM2.5',
                                    type: 'line',
                                    data: [42, 45, 41, 40, 38, 32, 30],
                                    smooth: true,
                                    lineStyle: { width: 3 },
                                    itemStyle: { color: '#1890ff' }
                                },
                                {
                                    name: '钱塘江站 PM10',
                                    type: 'line',
                                    data: [82, 85, 80, 78, 75, 68, 62],
                                    smooth: true,
                                    lineStyle: { width: 3 },
                                    itemStyle: { color: '#fa8c16' }
                                },
                                {
                                    name: '西湖站 PM2.5',
                                    type: 'line',
                                    data: [34, 35, 33, 32, 30, 26, 24],
                                    smooth: true,
                                    lineStyle: { width: 3 },
                                    itemStyle: { color: '#52c41a' }
                                },
                                {
                                    name: '西湖站 PM10',
                                    type: 'line',
                                    data: [67, 70, 65, 64, 60, 55, 50],
                                    smooth: true,
                                    lineStyle: { width: 3 },
                                    itemStyle: { color: '#f5222d' }
                                }
                            ]
                        });
                        console.log("趋势对比图初始化完成");
                    }
                } catch (error) {
                    console.error("初始化趋势对比图失败:", error);
                }
            }, 500);
        }
        
        document.addEventListener('DOMContentLoaded', function() {
            // 之前的代码...
            
            // 强制对所有可能的图表容器执行重新渲染
            setTimeout(() => {
                console.log("DOM加载完成后强制重新渲染所有图表");
                try {
                    // 获取所有图表容器并遍历
                    const chartContainers = document.querySelectorAll('.chart-container');
                    console.log(`找到 ${chartContainers.length} 个图表容器`);
                    
                    chartContainers.forEach((container, index) => {
                        console.log(`处理图表容器 #${index + 1}:`, container.id);
                        
                        // 确保容器可见并有尺寸
                        if (container.offsetWidth === 0 || container.offsetHeight === 0) {
                            console.log(`图表容器 ${container.id || '未命名'} 尺寸为零，设置默认尺寸`);
                            container.style.width = '100%';
                            container.style.height = '350px';
                            container.style.minHeight = '300px';
                        }
                        
                        // 检查现有图表实例
                        const existingChart = echarts.getInstanceByDom(container);
                        if (existingChart) {
                            console.log(`图表容器 ${container.id || '未命名'} 存在图表实例，调用resize`);
                            existingChart.resize();
                        } else if (container.id) {
                            console.log(`图表容器 ${container.id} 无图表实例，尝试初始化默认图表`);
                            try {
                                const chart = echarts.init(container);
                                // 为不同ID的容器设置不同的测试图表
                                let option;
                                if (container.id === 'correlationScatterChart') {
                                    option = {
                                        title: { text: '测试散点图' },
                                        xAxis: { type: 'value' },
                                        yAxis: { type: 'value' },
                                        series: [{
                                            type: 'scatter',
                                            data: [[10, 20], [20, 40], [30, 10], [40, 30]]
                                        }]
                                    };
                                } else if (container.id === 'forecastChart') {
                                    option = {
                                        title: { text: '测试折线图' },
                                        xAxis: { type: 'category', data: ['一', '二', '三', '四', '五'] },
                                        yAxis: { type: 'value' },
                                        series: [{
                                            type: 'line',
                                            data: [11, 22, 33, 44, 55]
                                        }]
                                    };
                                } else {
                                    option = {
                                        title: { text: '测试图表' },
                                        xAxis: { type: 'category', data: ['A', 'B', 'C', 'D', 'E'] },
                                        yAxis: { type: 'value' },
                                        series: [{
                                            type: 'bar',
                                            data: [10, 20, 30, 40, 50]
                                        }]
                                    };
                                }
                                chart.setOption(option);
                                console.log(`图表容器 ${container.id} 初始化测试图表成功`);
                            } catch (error) {
                                console.error(`初始化图表容器 ${container.id} 失败:`, error);
                            }
                        }
                    });
                } catch (error) {
                    console.error("强制重新渲染图表过程中出错:", error);
                }
            }, 2000); // 延迟2秒执行，确保所有内容都已加载
        });

        // 初始化预测分析内容
        function initializeForecastAnalysis() {
            const forecastAnalysis = document.getElementById('forecast-analysis');
            forecastAnalysis.innerHTML = `
                <div class="card mb-4">
                    <div class="card-header">
                        <span>预测分析配置</span>
                    </div>
                    <div class="card-body">
                        <form>
                            <div class="row g-3">
                                <div class="col-md-3">
                                    <label class="form-label">预测目标</label>
                                    <select class="form-select">
                                        <option>PM2.5 (μg/m³)</option>
                                        <option>PM10 (μg/m³)</option>
                                        <option>温度 (°C)</option>
                                        <option>湿度 (%)</option>
                                        <option>VOC (ppm)</option>
                                        <option>CO2 (ppm)</option>
                                    </select>
                                </div>
                                <div class="col-md-3">
                                    <label class="form-label">站点</label>
                                    <select class="form-select">
                                        <option>钱塘江站</option>
                                        <option>西湖站</option>
                                        <option>运河站</option>
                                        <option>湘湖站</option>
                                    </select>
                                </div>
                                <div class="col-md-2">
                                    <label class="form-label">历史数据长度</label>
                                    <select class="form-select">
                                        <option>过去7天</option>
                                        <option>过去14天</option>
                                        <option>过去30天</option>
                                        <option>过去90天</option>
                                    </select>
                                </div>
                                <div class="col-md-2">
                                    <label class="form-label">预测长度</label>
                                    <select class="form-select">
                                        <option>未来24小时</option>
                                        <option>未来48小时</option>
                                        <option>未来72小时</option>
                                        <option>未来7天</option>
                                    </select>
                                </div>
                                <div class="col-md-2 d-flex align-items-end">
                                    <button type="button" class="btn btn-primary w-100">生成预测</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
                
                <div class="row mb-4">
                    <div class="col-lg-8">
                        <div class="card h-100">
                            <div class="card-header">
                                <span>预测趋势图</span>
                            </div>
                            <div class="card-body">
                                <div id="forecastChart" class="chart-container" style="height: 350px;"></div>
                                <div class="mt-3">
                                    <div class="d-flex justify-content-center">
                                        <div class="me-4">
                                            <i class="fas fa-circle text-primary me-1"></i>
                                            <span>历史数据</span>
                                        </div>
                                        <div class="me-4">
                                            <i class="fas fa-circle text-success me-1"></i>
                                            <span>预测数据</span>
                                        </div>
                                        <div>
                                            <i class="fas fa-circle text-secondary me-1"></i>
                                            <span>预测区间</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4">
                        <div class="card h-100">
                            <div class="card-header">
                                <span>预测分析</span>
                            </div>
                            <div class="card-body">
                                <div class="mb-4">
                                    <h6 class="mb-3">预测摘要</h6>
                                    <table class="table table-sm">
                                        <tbody>
                                            <tr>
                                                <th>预测平均值</th>
                                                <td>37.5 μg/m³</td>
                                            </tr>
                                            <tr>
                                                <th>最大预测值</th>
                                                <td>52.8 μg/m³ (10-16 14:00)</td>
                                            </tr>
                                            <tr>
                                                <th>最小预测值</th>
                                                <td>22.3 μg/m³ (10-17 04:00)</td>
                                            </tr>
                                            <tr>
                                                <th>预测准确率</th>
                                                <td>85% (历史评估)</td>
                                            </tr>
                                            <tr>
                                                <th>预测不确定性</th>
                                                <td>±7.2 μg/m³</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                                
                                <div class="mb-4">
                                    <h6 class="mb-3">预测模型信息</h6>
                                    <table class="table table-sm">
                                        <tbody>
                                            <tr>
                                                <th>模型类型</th>
                                                <td>LSTM神经网络</td>
                                            </tr>
                                            <tr>
                                                <th>输入特征</th>
                                                <td>PM2.5, 温度, 湿度, 风向, 风速</td>
                                            </tr>
                                            <tr>
                                                <th>训练数据</th>
                                                <td>过去6个月数据</td>
                                            </tr>
                                            <tr>
                                                <th>最后更新</th>
                                                <td>2023-10-15 06:00</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                                
                                <div class="alert alert-info mb-0">
                                    <h6 class="alert-heading mb-2">预测结论</h6>
                                    <p class="mb-0">PM2.5浓度预计将在未来48小时内呈现先升后降的趋势，峰值将出现在10月16日14:00左右。整体空气质量将保持在良好到轻度污染之间。</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="card">
                    <div class="card-header">
                        <span>预测数据表</span>
                        <button class="btn btn-sm btn-outline-primary">
                            <i class="fas fa-download me-1"></i>导出
                        </button>
                    </div>
                    <div class="card-body p-0">
                        <div class="table-responsive">
                            <table class="table table-hover mb-0">
                                <thead>
                                    <tr>
                                        <th>预测时间</th>
                                        <th>预测值</th>
                                        <th>下限 (95%置信区间)</th>
                                        <th>上限 (95%置信区间)</th>
                                        <th>空气质量等级</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>2023-10-16 02:00</td>
                                        <td>35.2 μg/m³</td>
                                        <td>28.0 μg/m³</td>
                                        <td>42.4 μg/m³</td>
                                        <td><span class="badge bg-success">良好</span></td>
                                    </tr>
                                    <tr>
                                        <td>2023-10-16 08:00</td>
                                        <td>42.8 μg/m³</td>
                                        <td>35.6 μg/m³</td>
                                        <td>50.0 μg/m³</td>
                                        <td><span class="badge bg-success">良好</span></td>
                                    </tr>
                                    <tr>
                                        <td>2023-10-16 14:00</td>
                                        <td>52.8 μg/m³</td>
                                        <td>45.6 μg/m³</td>
                                        <td>60.0 μg/m³</td>
                                        <td><span class="badge bg-warning">轻度污染</span></td>
                                    </tr>
                                    <tr>
                                        <td>2023-10-16 20:00</td>
                                        <td>46.5 μg/m³</td>
                                        <td>39.3 μg/m³</td>
                                        <td>53.7 μg/m³</td>
                                        <td><span class="badge bg-success">良好</span></td>
                                    </tr>
                                    <tr>
                                        <td>2023-10-17 02:00</td>
                                        <td>27.4 μg/m³</td>
                                        <td>20.2 μg/m³</td>
                                        <td>34.6 μg/m³</td>
                                        <td><span class="badge bg-success">良好</span></td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            `;
        }

        // 初始化异常检测分析内容
        function initializeAnomalyAnalysis() {
            const anomalyAnalysis = document.getElementById('anomaly-analysis');
            anomalyAnalysis.innerHTML = `
                <div class="card mb-4">
                    <div class="card-header">
                        <span>异常检测配置</span>
                    </div>
                    <div class="card-body">
                        <form>
                            <div class="row g-3">
                                <div class="col-md-3">
                                    <label class="form-label">检测目标</label>
                                    <select class="form-select">
                                        <option>VOC (ppm)</option>
                                        <option>PM2.5 (μg/m³)</option>
                                        <option>PM10 (μg/m³)</option>
                                        <option>温度 (°C)</option>
                                        <option>湿度 (%)</option>
                                        <option>CO2 (ppm)</option>
                                    </select>
                                </div>
                                <div class="col-md-3">
                                    <label class="form-label">站点</label>
                                    <select class="form-select">
                                        <option>钱塘江站</option>
                                        <option>西湖站</option>
                                        <option>运河站</option>
                                        <option>湘湖站</option>
                                    </select>
                                </div>
                                <div class="col-md-2">
                                    <label class="form-label">检测灵敏度</label>
                                    <select class="form-select">
                                        <option>低</option>
                                        <option selected>中</option>
                                        <option>高</option>
                                    </select>
                                </div>
                                <div class="col-md-2">
                                    <label class="form-label">时间范围</label>
                                    <select class="form-select">
                                        <option>过去24小时</option>
                                        <option>过去7天</option>
                                        <option selected>过去30天</option>
                                        <option>自定义</option>
                                    </select>
                                </div>
                                <div class="col-md-2 d-flex align-items-end">
                                    <button type="button" class="btn btn-primary w-100">检测异常</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
                
                <div class="row mb-4">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-header">
                                <span>异常检测结果</span>
                            </div>
                            <div class="card-body">
                                <div id="anomalyDetectionChart" class="chart-container"></div>
                                <div class="mt-3">
                                    <div class="d-flex justify-content-center">
                                        <div class="me-4">
                                            <i class="fas fa-circle text-primary me-1"></i>
                                            <span>正常数据点</span>
                                        </div>
                                        <div class="me-4">
                                            <i class="fas fa-circle text-danger me-1"></i>
                                            <span>异常数据点</span>
                                        </div>
                                        <div>
                                            <i class="fas fa-circle text-warning me-1"></i>
                                            <span>阈值上/下限</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="row">
                    <div class="col-lg-6">
                        <div class="card">
                            <div class="card-header">
                                <span>异常详情</span>
                            </div>
                            <div class="card-body">
                                <div class="alert alert-danger mb-3" role="alert">
                                    <h5 class="alert-heading"><i class="fas fa-exclamation-triangle me-2"></i>严重异常警报</h5>
                                    <p>系统检测到VOC浓度在10月14日至15日出现显著异常峰值，最高达到1.92 ppm，超出预期范围195%。</p>
                                </div>
                                
                                <div class="card mb-3">
                                    <div class="card-header bg-light">
                                        <h6 class="mb-0">异常特征分析</h6>
                                    </div>
                                    <div class="card-body">
                                        <ul class="mb-0">
                                            <li>异常持续时间: 约4小时</li>
                                            <li>异常模式: 峰值型，快速上升后逐渐下降</li>
                                            <li>波及范围: 仅限钱塘江站VOC传感器</li>
                                            <li>相关参数变化: 温度、湿度无明显异常</li>
                                        </ul>
                                    </div>
                                </div>
                                
                                <div class="card mb-3">
                                    <div class="card-header bg-light">
                                        <h6 class="mb-0">可能原因分析</h6>
                                    </div>
                                    <div class="card-body">
                                        <ol class="mb-0">
                                            <li>传感器临时故障或干扰（可能性：中）</li>
                                            <li>附近工业活动排放（可能性：高）</li>
                                            <li>特殊气象条件导致污染物聚集（可能性：中）</li>
                                            <li>校准或维护操作不当（可能性：低）</li>
                                        </ol>
                                    </div>
                                </div>
                                
                                <div class="card">
                                    <div class="card-header bg-light">
                                        <h6 class="mb-0">建议措施</h6>
                                    </div>
                                    <div class="card-body">
                                        <ol class="mb-0">
                                            <li>检查VOC传感器设备状态</li>
                                            <li>对比相邻站点数据验证异常</li>
                                            <li>查询10月14日周边工业活动记录</li>
                                            <li>安排技术人员现场检查传感器</li>
                                            <li>增加此区域监测频率</li>
                                        </ol>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="card mb-4">
                            <div class="card-header">
                                <span>异常数据列表</span>
                            </div>
                            <div class="card-body p-0">
                                <div class="table-responsive">
                                    <table class="table table-hover mb-0">
                                        <thead>
                                            <tr>
                                                <th>时间</th>
                                                <th>数值</th>
                                                <th>预期范围</th>
                                                <th>偏差</th>
                                                <th>严重程度</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td>2023-10-14 21:30</td>
                                                <td>1.92 ppm</td>
                                                <td>0.25 - 0.65 ppm</td>
                                                <td>+195%</td>
                                                <td><span class="badge bg-danger">严重</span></td>
                                            </tr>
                                            <tr>
                                                <td>2023-10-14 21:15</td>
                                                <td>1.85 ppm</td>
                                                <td>0.25 - 0.65 ppm</td>
                                                <td>+185%</td>
                                                <td><span class="badge bg-danger">严重</span></td>
                                            </tr>
                                            <tr>
                                                <td>2023-10-14 21:00</td>
                                                <td>1.73 ppm</td>
                                                <td>0.25 - 0.65 ppm</td>
                                                <td>+166%</td>
                                                <td><span class="badge bg-danger">严重</span></td>
                                            </tr>
                                            <tr>
                                                <td>2023-10-14 20:45</td>
                                                <td>1.56 ppm</td>
                                                <td>0.25 - 0.65 ppm</td>
                                                <td>+140%</td>
                                                <td><span class="badge bg-danger">严重</span></td>
                                            </tr>
                                            <tr>
                                                <td>2023-10-14 20:30</td>
                                                <td>1.38 ppm</td>
                                                <td>0.25 - 0.65 ppm</td>
                                                <td>+112%</td>
                                                <td><span class="badge bg-danger">严重</span></td>
                                            </tr>
                                            <tr>
                                                <td>2023-10-14 20:15</td>
                                                <td>1.15 ppm</td>
                                                <td>0.25 - 0.65 ppm</td>
                                                <td>+77%</td>
                                                <td><span class="badge bg-warning">中度</span></td>
                                            </tr>
                                            <tr>
                                                <td>2023-10-14 20:00</td>
                                                <td>0.94 ppm</td>
                                                <td>0.25 - 0.65 ppm</td>
                                                <td>+45%</td>
                                                <td><span class="badge bg-warning">中度</span></td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                        
                        <div class="card">
                            <div class="card-header">
                                <span>历史异常对比</span>
                            </div>
                            <div class="card-body">
                                <div id="anomalyHistoryChart" class="chart-container"></div>
                                <div class="mt-3 text-center">
                                    <p>当前异常与历史同类异常对比分析表明，此次VOC浓度峰值强度为近6个月来最高，持续时间相对较短。</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            `;
        }

        // 初始化数据标定内容
        function initializeCalibration() {
            const calibration = document.getElementById('calibration');
            calibration.innerHTML = `
                <h2 class="mb-4">数据标定</h2>
                <div class="row">
                    <div class="col-lg-5">
                        <div class="card mb-4">
                            <div class="card-header">
                                <span>标定配置</span>
                            </div>
                            <div class="card-body">
                                <form>
                                    <div class="mb-3">
                                        <label class="form-label">标定传感器</label>
                                        <select class="form-select">
                                            <option>钱塘江站 - PM2.5传感器</option>
                                            <option>西湖站 - PM2.5传感器</option>
                                            <option>运河站 - PM2.5传感器</option>
                                            <option>湘湖站 - PM2.5传感器</option>
                                        </select>
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label">参考设备</label>
                                        <select class="form-select">
                                            <option>国标参考设备 - GRIMM 180</option>
                                            <option>BAM-1020</option>
                                            <option>Teledyne T640</option>
                                        </select>
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label">标定方法</label>
                                        <select class="form-select">
                                            <option>线性回归</option>
                                            <option>多项式回归</option>
                                            <option>随机森林</option>
                                            <option>神经网络</option>
                                        </select>
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label">数据来源</label>
                                        <div class="form-check mb-2">
                                            <input class="form-check-input" type="radio" name="dataSource" id="dataSource1" checked>
                                            <label class="form-check-label" for="dataSource1">
                                                使用已采集标定数据
                                            </label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input" type="radio" name="dataSource" id="dataSource2">
                                            <label class="form-check-label" for="dataSource2">
                                                导入外部标定数据
                                            </label>
                                        </div>
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label">数据时间范围</label>
                                        <div class="input-group">
                                            <input type="date" class="form-control" value="2023-09-15">
                                            <span class="input-group-text">至</span>
                                            <input type="date" class="form-control" value="2023-10-15">
                                        </div>
                                    </div>
                                    <div class="d-grid">
                                        <button type="button" class="btn btn-primary">生成标定模型</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                        
                        <div class="card">
                            <div class="card-header">
                                <span>标定历史记录</span>
                            </div>
                            <div class="card-body p-0">
                                <div class="list-group list-group-flush">
                                    <a href="#" class="list-group-item list-group-item-action active">
                                        <div class="d-flex w-100 justify-content-between">
                                            <h6 class="mb-1">钱塘江站 - PM2.5传感器</h6>
                                            <small>2023-10-15</small>
                                        </div>
                                        <p class="mb-1">线性回归模型 (y = 1.23x - 2.56)</p>
                                        <small>R² = 0.95, RMSE = 1.8 μg/m³</small>
                                    </a>
                                    <a href="#" class="list-group-item list-group-item-action">
                                        <div class="d-flex w-100 justify-content-between">
                                            <h6 class="mb-1">西湖站 - PM2.5传感器</h6>
                                            <small>2023-10-10</small>
                                        </div>
                                        <p class="mb-1">多项式回归模型 (y = 0.05x² + 1.1x - 1.2)</p>
                                        <small>R² = 0.97, RMSE = 1.5 μg/m³</small>
                                    </a>
                                    <a href="#" class="list-group-item list-group-item-action">
                                        <div class="d-flex w-100 justify-content-between">
                                            <h6 class="mb-1">钱塘江站 - PM10传感器</h6>
                                            <small>2023-10-05</small>
                                        </div>
                                        <p class="mb-1">线性回归模型 (y = 1.45x - 5.32)</p>
                                        <small>R² = 0.92, RMSE = 3.2 μg/m³</small>
                                    </a>
                                    <a href="#" class="list-group-item list-group-item-action">
                                        <div class="d-flex w-100 justify-content-between">
                                            <h6 class="mb-1">运河站 - PM2.5传感器</h6>
                                            <small>2023-09-22</small>
                                        </div>
                                        <p class="mb-1">随机森林模型</p>
                                        <small>R² = 0.96, RMSE = 1.2 μg/m³</small>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-7">
                        <div class="card mb-4">
                            <div class="card-header">
                                <span>标定结果</span>
                                <button class="btn btn-sm btn-outline-primary">
                                    <i class="fas fa-download me-1"></i>导出模型
                                </button>
                            </div>
                            <div class="card-body">
                                <div id="calibrationChart" class="chart-container" style="height: 300px;"></div>
                                
                                <div class="row mt-4">
                                    <div class="col-md-6">
                                        <div class="card mb-md-0 mb-3">
                                            <div class="card-header bg-light">
                                                <h6 class="mb-0">标定模型</h6>
                                            </div>
                                            <div class="card-body">
                                                <div class="mb-3">
                                                    <strong>模型类型:</strong> 线性回归
                                                </div>
                                                <div class="mb-3">
                                                    <strong>校准公式:</strong>
                                                    <div class="bg-light p-2 mt-1 rounded">
                                                        y = 1.23x - 2.56
                                                    </div>
                                                    <small class="text-muted">y: 校准后值 (μg/m³), x: 原始读数 (μg/m³)</small>
                                                </div>
                                                <div>
                                                    <strong>参数说明:</strong>
                                                    <ul class="mt-1 mb-0">
                                                        <li>斜率 (K): 1.23</li>
                                                        <li>截距 (b): -2.56</li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="card">
                                            <div class="card-header bg-light">
                                                <h6 class="mb-0">模型评估</h6>
                                            </div>
                                            <div class="card-body">
                                                <div class="mb-2">
                                                    <strong>决定系数 (R²):</strong> 0.95
                                                    <div class="progress mt-1">
                                                        <div class="progress-bar bg-success" role="progressbar" style="width: 95%" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100"></div>
                                                    </div>
                                                </div>
                                                <div class="mb-2">
                                                    <strong>均方根误差 (RMSE):</strong> 1.8 μg/m³
                                                </div>
                                                <div class="mb-2">
                                                    <strong>平均绝对误差 (MAE):</strong> 1.3 μg/m³
                                                </div>
                                                <div>
                                                    <strong>标定样本数:</strong> 128 组
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="card">
                            <div class="card-header">
                                <span>验证结果</span>
                            </div>
                            <div class="card-body">
                                <div class="alert alert-success mb-4">
                                    <h6 class="alert-heading">验证通过</h6>
                                    <p class="mb-0">根据验证数据集测试，当前标定模型在各浓度范围内都能达到预期的校准效果，可以应用于实际监测数据。</p>
                                </div>
                                
                                <div id="validationChart" class="chart-container" style="height: 250px;"></div>
                                
                                <div class="mt-4">
                                    <h6>浓度分段验证结果</h6>
                                    <div class="table-responsive">
                                        <table class="table table-sm table-bordered mb-0">
                                            <thead class="table-light">
                                                <tr>
                                                    <th>浓度范围 (μg/m³)</th>
                                                    <th>样本数</th>
                                                    <th>R²</th>
                                                    <th>RMSE (μg/m³)</th>
                                                    <th>相对误差 (%)</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <td>0-35</td>
                                                    <td>47</td>
                                                    <td>0.93</td>
                                                    <td>1.5</td>
                                                    <td>4.2%</td>
                                                </tr>
                                                <tr>
                                                    <td>35-75</td>
                                                    <td>32</td>
                                                    <td>0.95</td>
                                                    <td>1.8</td>
                                                    <td>3.5%</td>
                                                </tr>
                                                <tr>
                                                    <td>75+</td>
                                                    <td>15</td>
                                                    <td>0.97</td>
                                                    <td>2.2</td>
                                                    <td>2.8%</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            `;
        }

        // 初始化系统设置内容
        function initializeSettings() {
            const settings = document.getElementById('settings');
            settings.innerHTML = `
                <h2 class="mb-4">系统设置</h2>
                <div class="row">
                    <div class="col-lg-3">
                        <div class="card mb-4 mb-lg-0">
                            <div class="card-header">
                                <span>设置菜单</span>
                            </div>
                            <div class="card-body p-0">
                                <div class="list-group list-group-flush">
                                    <a href="#" class="list-group-item list-group-item-action active">
                                        <i class="fas fa-user-cog me-2"></i>账户设置
                                    </a>
                                    <a href="#" class="list-group-item list-group-item-action">
                                        <i class="fas fa-bell me-2"></i>通知设置
                                    </a>
                                    <a href="#" class="list-group-item list-group-item-action">
                                        <i class="fas fa-map-marker-alt me-2"></i>站点管理
                                    </a>
                                    <a href="#" class="list-group-item list-group-item-action">
                                        <i class="fas fa-microchip me-2"></i>传感器管理
                                    </a>
                                    <a href="#" class="list-group-item list-group-item-action">
                                        <i class="fas fa-exclamation-triangle me-2"></i>告警阈值
                                    </a>
                                    <a href="#" class="list-group-item list-group-item-action">
                                        <i class="fas fa-database me-2"></i>数据管理
                                    </a>
                                    <a href="#" class="list-group-item list-group-item-action">
                                        <i class="fas fa-users me-2"></i>用户权限
                                    </a>
                                    <a href="#" class="list-group-item list-group-item-action">
                                        <i class="fas fa-cog me-2"></i>系统参数
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-9">
                        <div class="card">
                            <div class="card-header">
                                <span>账户设置</span>
                            </div>
                            <div class="card-body">
                                <div class="mb-4 pb-3 border-bottom">
                                    <div class="d-flex align-items-center mb-3">
                                        <div class="rounded-circle bg-primary text-white d-flex align-items-center justify-content-center me-3" style="width: 64px; height: 64px; font-size: 24px;">
                                            <i class="fas fa-user"></i>
                                        </div>
                                        <div>
                                            <h5 class="mb-1">管理员</h5>
                                            <p class="text-muted mb-0">系统管理员账户</p>
                                        </div>
                                        <button class="btn btn-sm btn-outline-primary ms-auto">更换头像</button>
                                    </div>
                                </div>
                                
                                <form>
                                    <div class="mb-3">
                                        <label class="form-label">用户名</label>
                                        <input type="text" class="form-control" value="admin">
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label">邮箱地址</label>
                                        <input type="email" class="form-control" value="admin@example.com">
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label">手机号码</label>
                                        <input type="tel" class="form-control" value="13800138000">
                                    </div>
                                    <div class="mb-4">
                                        <label class="form-label">角色</label>
                                        <input type="text" class="form-control" value="系统管理员" disabled>
                                    </div>
                                    
                                    <h6 class="mb-3">修改密码</h6>
                                    <div class="mb-3">
                                        <label class="form-label">当前密码</label>
                                        <input type="password" class="form-control">
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label">新密码</label>
                                        <input type="password" class="form-control">
                                    </div>
                                    <div class="mb-4">
                                        <label class="form-label">确认新密码</label>
                                        <input type="password" class="form-control">
                                    </div>
                                    
                                    <h6 class="mb-3">界面设置</h6>
                                    <div class="mb-3">
                                        <label class="form-label">默认页面</label>
                                        <select class="form-select">
                                            <option>仪表盘</option>
                                            <option>原始数据</option>
                                            <option>统计数据</option>
                                            <option>数据分析</option>
                                        </select>
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label d-block">主题</label>
                                        <div class="form-check form-check-inline">
                                            <input class="form-check-input" type="radio" name="theme" id="themeLight" checked>
                                            <label class="form-check-label" for="themeLight">浅色</label>
                                        </div>
                                        <div class="form-check form-check-inline">
                                            <input class="form-check-input" type="radio" name="theme" id="themeDark">
                                            <label class="form-check-label" for="themeDark">深色</label>
                                        </div>
                                        <div class="form-check form-check-inline">
                                            <input class="form-check-input" type="radio" name="theme" id="themeAuto">
                                            <label class="form-check-label" for="themeAuto">自动</label>
                                        </div>
                                    </div>
                                    <div class="mb-4">
                                        <label class="form-label">语言</label>
                                        <select class="form-select">
                                            <option>简体中文</option>
                                            <option>English</option>
                                        </select>
                                    </div>
                                    
                                    <div class="text-end">
                                        <button type="button" class="btn btn-secondary me-2">取消</button>
                                        <button type="button" class="btn btn-primary">保存更改</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            `;
        }

        // 初始化所有图表
        function initializeCharts() {
            console.log('初始化所有图表 - 强化版');
            
            try {
                // 仪表盘图表
                console.log('初始化仪表盘图表');
                initializeChart('trendChart', getTrendChartOption());
                initializeChart('sensorStatusChart', getSensorStatusChartOption());
                initializeChart('dataDistributionChart', getDataDistributionChartOption());
                
                // 原始数据图表 - 使用新的初始化方法
                console.log('初始化原始数据图表 - 使用参数选择版本');
                initializeRawDataChart();
                
                // 统计数据图表
                console.log('初始化统计数据图表');
                initializeChart('statisticsChart', getStatisticsChartOption());
                initializeChart('distributionChart', getDistributionChartOption());
                
                // 数据分析图表
                console.log('初始化数据分析图表');
                
                // 相关性分析图表 - 使用PM2.5和PM10数据而非温度和湿度
                initializeChart('correlationScatterChart', {
                    title: {
                        text: 'PM2.5与PM10相关性分析'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: function(params) {
                            return 'PM2.5: ' + params.value[0] + ' μg/m³<br>PM10: ' + params.value[1] + ' μg/m³';
                        }
                    },
                    grid: {
                        left: '5%',
                        right: '5%',
                        bottom: '10%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'value',
                        name: 'PM2.5 (μg/m³)',
                        nameLocation: 'middle',
                        nameGap: 30,
                        min: 0,
                        max: 80
                    },
                    yAxis: {
                        type: 'value',
                        name: 'PM10 (μg/m³)',
                        nameLocation: 'middle',
                        nameGap: 30,
                        min: 0,
                        max: 180
                    },
                    series: [{
                        name: 'PM2.5-PM10',
                        type: 'scatter',
                        symbolSize: 10,
                        data: [
                            [25, 52], [30, 65], [42, 87], [15, 35], [22, 48],
                            [35, 76], [48, 102], [55, 125], [62, 140], [18, 40],
                            [28, 58], [37, 82], [45, 95], [52, 115], [60, 135],
                            [32, 68], [38, 85], [50, 110], [58, 130], [65, 145],
                            [20, 45], [33, 70], [40, 88], [48, 105], [55, 120],
                            [27, 60], [36, 78], [43, 92], [53, 118], [47, 100]
                        ],
                        markLine: {
                            lineStyle: {
                                type: 'solid',
                                width: 2
                            },
                            data: [
                                {
                                    type: 'linear',
                                    xAxis: 0,
                                    yAxis: 0,
                                    x2: 80,
                                    y2: 160,
                                    label: {
                                        formatter: 'PM10 ≈ 2×PM2.5'
                                    }
                                }
                            ]
                        },
                        itemStyle: {
                            color: '#1890ff'
                        }
                    }]
                });
                
                // 趋势对比分析图表 - 使用不同站点PM数据
                initializeChart('trendComparisonChart', {
                    title: { text: '不同站点污染物浓度对比' },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: ['钱塘江站 PM2.5', '钱塘江站 PM10', '西湖站 PM2.5', '西湖站 PM10']
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
                    },
                    yAxis: {
                        type: 'value',
                        name: '浓度 (μg/m³)',
                        axisLabel: {
                            formatter: '{value} μg/m³'
                        }
                    },
                    series: [
                        {
                            name: '钱塘江站 PM2.5',
                            type: 'line',
                            data: [42, 45, 41, 40, 38, 32, 30],
                            smooth: true,
                            lineStyle: { width: 3 },
                            itemStyle: { color: '#1890ff' }
                        },
                        {
                            name: '钱塘江站 PM10',
                            type: 'line',
                            data: [82, 85, 80, 78, 75, 68, 62],
                            smooth: true,
                            lineStyle: { width: 3 },
                            itemStyle: { color: '#fa8c16' }
                        },
                        {
                            name: '西湖站 PM2.5',
                            type: 'line',
                            data: [34, 35, 33, 32, 30, 26, 24],
                            smooth: true,
                            lineStyle: { width: 3 },
                            itemStyle: { color: '#52c41a' }
                        },
                        {
                            name: '西湖站 PM10',
                            type: 'line',
                            data: [67, 70, 65, 64, 60, 55, 50],
                            smooth: true,
                            lineStyle: { width: 3 },
                            itemStyle: { color: '#f5222d' }
                        }
                    ]
                });
                
                // 预测分析图表 - 使用PM2.5预测数据
                initializeChart('forecastChart', {
                    title: { text: 'PM2.5浓度预测分析' },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            label: {
                                backgroundColor: '#6a7985'
                            }
                        }
                    },
                    legend: {
                        data: ['历史PM2.5', '预测PM2.5', '预测上限', '预测下限'],
                        right: 10
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: ['10/10', '10/11', '10/12', '10/13', '10/14', '10/15', '10/16', '10/17', '10/18', '10/19', '10/20']
                    },
                    yAxis: {
                        type: 'value',
                        name: 'PM2.5 (μg/m³)',
                        axisLabel: {
                            formatter: '{value} μg/m³'
                        }
                    },
                    series: [
                        {
                            name: '历史PM2.5',
                            type: 'line',
                            data: [32, 38, 42, 45, 35, 30, null, null, null, null, null],
                            smooth: true,
                            lineStyle: { width: 3 },
                            itemStyle: { color: '#1890ff' }
                        },
                        {
                            name: '预测PM2.5',
                            type: 'line',
                            data: [null, null, null, null, null, 30, 38, 48, 52, 46, 35],
                            smooth: true,
                            lineStyle: { 
                                width: 3,
                                type: 'dashed' 
                            },
                            itemStyle: { color: '#52c41a' }
                        },
                        {
                            name: '预测上限',
                            type: 'line',
                            data: [null, null, null, null, null, 30, 45, 55, 60, 53, 42],
                            smooth: true,
                            lineStyle: {
                                width: 2,
                                type: 'dotted'
                            },
                            itemStyle: { color: '#faad14' }
                        },
                        {
                            name: '预测下限',
                            type: 'line',
                            data: [null, null, null, null, null, 30, 31, 41, 44, 39, 28],
                            smooth: true,
                            lineStyle: {
                                width: 2,
                                type: 'dotted'
                            },
                            itemStyle: { color: '#faad14' }
                        },
                        {
                            name: '置信区间',
                            type: 'line',
                            data: [null, null, null, null, null, 30, 38, 48, 52, 46, 35],
                            lineStyle: { width: 0 },
                            stack: 'confidence-band',
                            symbol: 'none',
                            areaStyle: {
                                opacity: 0.2,
                                color: '#52c41a'
                            }
                        }
                    ]
                });
                
                // 异常检测分析图表 - 使用VOC数据
                initializeChart('anomalyDetectionChart', {
                    title: { text: 'VOC浓度异常检测' },
                    tooltip: {
                        trigger: 'axis',
                        formatter: function(params) {
                            const baseParam = params[0];
                            if ([28, 29, 18].includes(baseParam.dataIndex)) {
                                return `${baseParam.name}<br/>${baseParam.marker} ${baseParam.seriesName}: ${baseParam.value} ppm<br/><span style="color: #ff4d4f">⚠️ 异常值</span>`;
                            }
                            return `${baseParam.name}<br/>${baseParam.marker} ${baseParam.seriesName}: ${baseParam.value} ppm`;
                        }
                    },
                    legend: {
                        data: ['VOC浓度', '阈值上限', '阈值下限']
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: Array.from({length: 30}, (_, i) => {
                            const date = new Date(2023, 8, 15 + i);
                            return `${date.getMonth() + 1}/${date.getDate()}`;
                        })
                    },
                    yAxis: {
                        type: 'value',
                        name: 'VOC浓度 (ppm)',
                        axisLabel: {
                            formatter: '{value} ppm'
                        }
                    },
                    series: [
                        {
                            name: 'VOC浓度',
                            type: 'line',
                            data: [
                                0.82, 0.85, 0.88, 0.91, 0.87, 0.84, 0.80, 0.78, 0.76, 0.79,
                                0.83, 0.87, 0.90, 0.89, 0.86, 0.82, 0.79, 1.42, 0.84, 0.88,
                                0.91, 0.89, 0.86, 0.83, 0.80, 0.82, 0.85, 1.92, 1.95, 0.86
                            ],
                            smooth: true,
                            symbol: 'emptyCircle',
                            symbolSize: 8,
                            markPoint: {
                                symbol: 'pin',
                                symbolSize: 40,
                                data: [
                                    { name: '异常高值', value: '1.92', xAxis: 28, yAxis: 1.92, itemStyle: { color: '#ff4d4f' } },
                                    { name: '异常高值', value: '1.95', xAxis: 29, yAxis: 1.95, itemStyle: { color: '#ff4d4f' } },
                                    { name: '轻微异常', value: '1.42', xAxis: 18, yAxis: 1.42, itemStyle: { color: '#ff4d4f' } }
                                ]
                            }
                        },
                        {
                            name: '阈值上限',
                            type: 'line',
                            data: Array(30).fill(1.4),
                            lineStyle: {
                                type: 'dashed',
                                color: '#faad14'
                            },
                            symbol: 'none'
                        },
                        {
                            name: '阈值下限',
                            type: 'line',
                            data: Array(30).fill(0.5),
                            lineStyle: {
                                type: 'dashed',
                                color: '#faad14'
                            },
                            symbol: 'none'
                        }
                    ]
                });
                
                initializeChart('anomalyHistoryChart', getAnomalyHistoryChartOption());
                
                // 数据标定图表
                console.log('初始化数据标定图表');
                initializeChart('calibrationChart', getCalibrationChartOption());
                initializeChart('validationChart', getValidationChartOption());
                
                // 强制显示图表内容
                setTimeout(() => {
                    console.log('所有图表初始化后强制重新渲染');
                    resizeAllCharts();
                }, 300);
            } catch (error) {
                console.error('初始化图表过程中出错:', error);
            }
        }
        
        // 通用初始化图表函数 - 增强版
        function initializeChart(chartId, option) {
            console.log(`开始初始化图表: ${chartId}`);
            console.log(`图表配置类型: ${option && option.title ? option.title.text || '未命名' : '未命名'}`);
            const chartDom = document.getElementById(chartId);
            if (!chartDom) {
                console.warn(`找不到图表容器: ${chartId}`);
                return null;
            }
            
            // 确保容器有合适的尺寸
            if (chartDom.offsetWidth === 0 || chartDom.offsetHeight === 0) {
                console.log(`图表容器 ${chartId} 尺寸不正确，设置默认尺寸`);
                chartDom.style.width = '100%';
                chartDom.style.height = '350px';
                chartDom.style.minHeight = '300px';
            }
            
            // 记录容器尺寸
            console.log(`图表容器 ${chartId} 尺寸: ${chartDom.offsetWidth} x ${chartDom.offsetHeight}`);
            
            // 销毁可能存在的旧实例
            const existingChart = echarts.getInstanceByDom(chartDom);
            if (existingChart) {
                console.log(`销毁已存在的图表实例: ${chartId}`);
                existingChart.dispose();
            }
            
            try {
                console.log(`创建新的图表实例: ${chartId}`);
                const chart = echarts.init(chartDom);
                console.log(`为图表 ${chartId} 设置配置`);
                chart.setOption(option);
                console.log(`图表 ${chartId} 初始化成功`);
                
                // 添加延迟强制重绘
                setTimeout(() => {
                    try {
                        console.log(`强制重绘图表: ${chartId}`);
                        chart.resize();
                    } catch (e) {
                        console.error(`重绘图表 ${chartId} 失败:`, e);
                    }
                }, 200);
                
                return chart;
            } catch (error) {
                console.error(`初始化图表 ${chartId} 失败:`, error);
                return null;
            }
        }
        
        // 下面是各个图表的配置选项函数
        function getTrendChartOption() {
            return {
                title: { text: '' },
                tooltip: { trigger: 'axis' },
                legend: {
                    data: ['PM2.5', 'PM10', '温度', '湿度'],
                    right: 10
                },
                grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: ['10/09', '10/10', '10/11', '10/12', '10/13', '10/14', '10/15']
                },
                yAxis: [
                    {
                        type: 'value',
                        name: '浓度 (μg/m³)',
                        position: 'left'
                    },
                    {
                        type: 'value',
                        name: '温度 (°C) / 湿度 (%)',
                        position: 'right'
                    }
                ],
                series: [
                    {
                        name: 'PM2.5',
                        type: 'line',
                        data: [32, 28, 35, 42, 38, 36, 33],
                        yAxisIndex: 0,
                        smooth: true,
                        lineStyle: { width: 3 },
                        itemStyle: { color: '#1890ff' }
                    },
                    {
                        name: 'PM10',
                        type: 'line',
                        data: [65, 58, 72, 80, 75, 70, 62],
                        yAxisIndex: 0,
                        smooth: true,
                        lineStyle: { width: 3 },
                        itemStyle: { color: '#faad14' }
                    },
                    {
                        name: '温度',
                        type: 'line',
                        data: [22, 23, 24, 25, 24, 23, 22],
                        yAxisIndex: 1,
                        smooth: true,
                        lineStyle: { width: 3 },
                        itemStyle: { color: '#f5222d' }
                    },
                    {
                        name: '湿度',
                        type: 'line',
                        data: [65, 60, 55, 50, 55, 65, 70],
                        yAxisIndex: 1,
                        smooth: true,
                        lineStyle: { width: 3 },
                        itemStyle: { color: '#52c41a' }
                    }
                ]
            };
        }
        
        function getSensorStatusChartOption() {
            return {
                color: ['#52c41a', '#faad14', '#f5222d'],
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b}: {c} ({d}%)'
                },
                legend: {
                    orient: 'horizontal',
                    bottom: 'bottom',
                    data: ['在线', '离线', '故障']
                },
                series: [
                    {
                        name: '传感器状态',
                        type: 'pie',
                        radius: ['50%', '70%'],
                        avoidLabelOverlap: false,
                        label: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: '18',
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: [
                            { value: 114, name: '在线' },
                            { value: 8, name: '离线' },
                            { value: 4, name: '故障' }
                        ]
                    }
                ]
            };
        }
        
        function getDataDistributionChartOption() {
            return {
                title: { text: '' },
                tooltip: { trigger: 'item' },
                legend: {
                    orient: 'horizontal',
                    bottom: 'bottom'
                },
                series: [
                    {
                        name: '监测数据类型',
                        type: 'pie',
                        radius: '70%',
                        center: ['50%', '45%'],
                        data: [
                            { value: 1248, name: '气体' },
                            { value: 1532, name: '颗粒物' },
                            { value: 856, name: '气象参数' },
                            { value: 725, name: '水质' }
                        ],
                        label: {
                            formatter: '{b}: {c} ({d}%)'
                        },
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };
        }
        
        // 其他图表配置选项函数可以根据需要添加
        // ... 

        // 重新渲染指定部分内的图表
        function resizeChartsInSection(sectionId) {
            const section = document.getElementById(sectionId);
            if (!section) return;
            
            const chartContainers = section.querySelectorAll('.chart-container');
            chartContainers.forEach(container => {
                const chart = echarts.getInstanceByDom(container);
                if (chart) {
                    chart.resize();
                }
            });
        }

        // 其他图表配置选项函数可以根据需要添加
        function getStatisticsChartOption() {
            return {
                title: { text: '' },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        label: {
                            backgroundColor: '#6a7985'
                        }
                    }
                },
                legend: {
                    data: ['日平均温度', '最高温度', '最低温度'],
                    right: 10
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: ['9/15', '9/16', '9/17', '9/18', '9/19', '9/20', '9/21', '9/22', '9/23', '9/24', '9/25', 
                          '9/26', '9/27', '9/28', '9/29', '9/30', '10/1', '10/2', '10/3', '10/4', '10/5', 
                          '10/6', '10/7', '10/8', '10/9', '10/10', '10/11', '10/12', '10/13', '10/14', '10/15']
                },
                yAxis: {
                    type: 'value',
                    name: '温度 (°C)',
                    axisLabel: {
                        formatter: '{value} °C'
                    }
                },
                series: [
                    {
                        name: '日平均温度',
                        type: 'line',
                        smooth: true,
                        data: [25.2, 24.8, 26.1, 27.3, 28.0, 27.8, 26.7, 25.9, 25.6, 24.8, 25.1, 
                              24.7, 23.8, 23.2, 22.9, 22.5, 23.1, 24.0, 24.6, 25.3, 25.8, 
                              26.2, 25.7, 24.9, 23.8, 22.6, 21.4, 20.5, 20.8, 21.7, 22.4],
                        lineStyle: { width: 3 },
                        itemStyle: { color: '#1890ff' }
                    },
                    {
                        name: '最高温度',
                        type: 'line',
                        smooth: true,
                        data: [28.9, 28.5, 29.7, 31.2, 32.8, 32.5, 30.8, 29.4, 29.1, 28.4, 28.7, 
                              28.2, 27.3, 26.7, 26.3, 25.9, 26.6, 27.8, 28.4, 29.2, 29.7, 
                              30.1, 29.5, 28.6, 27.3, 25.8, 24.3, 23.2, 23.6, 24.9, 25.8],
                        lineStyle: { width: 3 },
                        itemStyle: { color: '#f5222d' }
                    },
                    {
                        name: '最低温度',
                        type: 'line',
                        smooth: true,
                        data: [21.8, 21.4, 22.5, 23.7, 24.2, 24.0, 22.9, 22.2, 21.9, 21.1, 21.5, 
                              21.0, 20.2, 19.6, 19.3, 18.9, 19.5, 20.4, 21.0, 21.8, 22.3, 
                              22.6, 22.0, 21.1, 20.3, 18.9, 18.2, 18.5, 18.9, 19.5, 20.2],
                        lineStyle: { width: 3 },
                        itemStyle: { color: '#52c41a' }
                    }
                ]
            };
        }
        
        function getDistributionChartOption() {
            return {
                title: { text: '' },
                tooltip: {
                    trigger: 'item',
                    formatter: function(params) {
                        return `${params.marker} ${params.name}: ${params.value} 天<br/>占比: ${params.percent}%`;
                    }
                },
                grid: {
                    top: '5%',
                    left: '3%',
                    right: '4%',
                    bottom: '15%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: ['18-20°C', '20-22°C', '22-24°C', '24-26°C', '26-28°C', '28-30°C', '30-32°C', '32-34°C'],
                    axisLabel: {
                        interval: 0,
                        rotate: 30
                    }
                },
                yAxis: {
                    type: 'value',
                    name: '天数',
                    minInterval: 1
                },
                series: [
                    {
                        name: '温度分布',
                        type: 'bar',
                        barWidth: '60%',
                        data: [2, 4, 6, 8, 7, 4, 2, 1],
                        itemStyle: {
                            color: function(params) {
                                // 根据温度生成颜色渐变
                                const colorList = [
                                    '#91d5ff', // 浅蓝（冷）
                                    '#69c0ff',
                                    '#40a9ff',
                                    '#1890ff',
                                    '#ffa940', 
                                    '#fa8c16',
                                    '#fa541c',
                                    '#f5222d'  // 红色（热）
                                ];
                                return colorList[params.dataIndex];
                            }
                        },
                        label: {
                            show: true,
                            position: 'top',
                            formatter: '{c} 天'
                        }
                    }
                ]
            };
        }
        
        function getForecastChartOption() {
            return {
                title: { text: '' },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        label: {
                            backgroundColor: '#6a7985'
                        }
                    }
                },
                legend: {
                    data: ['历史温度', '预测温度', '预测上限', '预测下限'],
                    right: 10
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: ['10/10', '10/11', '10/12', '10/13', '10/14', '10/15', '10/16', '10/17', '10/18', '10/19', '10/20']
                },
                yAxis: {
                    type: 'value',
                    name: '温度 (°C)',
                    axisLabel: {
                        formatter: '{value} °C'
                    }
                },
                series: [
                    {
                        name: '历史温度',
                        type: 'line',
                        data: [22.6, 21.4, 20.5, 20.8, 21.7, 22.4, null, null, null, null, null],
                        smooth: true,
                        lineStyle: { width: 3 },
                        itemStyle: { color: '#1890ff' }
                    },
                    {
                        name: '预测温度',
                        type: 'line',
                        data: [null, null, null, null, null, 22.4, 23.1, 23.8, 24.2, 23.7, 22.9],
                        smooth: true,
                        lineStyle: { 
                            width: 3,
                            type: 'dashed' 
                        },
                        itemStyle: { color: '#52c41a' }
                    },
                    {
                        name: '预测上限',
                        type: 'line',
                        data: [null, null, null, null, null, 22.4, 24.5, 25.3, 25.8, 25.2, 24.3],
                        smooth: true,
                        lineStyle: {
                            width: 2,
                            type: 'dotted'
                        },
                        itemStyle: { color: '#faad14' }
                    },
                    {
                        name: '预测下限',
                        type: 'line',
                        data: [null, null, null, null, null, 22.4, 21.7, 22.3, 22.6, 22.2, 21.5],
                        smooth: true,
                        lineStyle: {
                            width: 2,
                            type: 'dotted'
                        },
                        itemStyle: { color: '#faad14' }
                    },
                    {
                        name: '置信区间',
                        type: 'line',
                        data: [null, null, null, null, null, 22.4, 23.1, 23.8, 24.2, 23.7, 22.9],
                        lineStyle: { width: 0 },
                        stack: 'confidence-band',
                        symbol: 'none',
                        areaStyle: {
                            opacity: 0.2,
                            color: '#52c41a'
                        }
                    }
                ]
            };
        }
        
        function getAnomalyDetectionChartOption() {
            // 生成一些模拟数据，包含正常值和异常值
            const dates = [];
            const values = [];
            const markPoints = [];
            
            // 生成日期和数据
            const baseDate = new Date(2023, 8, 15); // 9月15日
            const baseValue = 25;
            
            for (let i = 0; i < 30; i++) {
                const currentDate = new Date(baseDate);
                currentDate.setDate(baseDate.getDate() + i);
                
                // 格式化日期为 MM-DD 格式
                const dateStr = `${currentDate.getMonth() + 1}/${currentDate.getDate()}`;
                dates.push(dateStr);
                
                // 生成一些随机值
                let value = baseValue + Math.sin(i * 0.3) * 5 + (Math.random() * 2 - 1);
                
                // 在特定日期添加异常值
                if (i === 8 || i === 9) {
                    value += 8; // 异常高值
                    markPoints.push({
                        name: '异常高值',
                        value: value.toFixed(1),
                        xAxis: i,
                        yAxis: value,
                        itemStyle: { color: '#ff4d4f' }
                    });
                } else if (i === 18) {
                    value -= 7; // 异常低值
                    markPoints.push({
                        name: '异常低值',
                        value: value.toFixed(1),
                        xAxis: i,
                        yAxis: value,
                        itemStyle: { color: '#ff4d4f' }
                    });
                }
                
                values.push(value.toFixed(1));
            }
            
            // 计算上下阈值线
            const upperThreshold = baseValue + 7;
            const lowerThreshold = baseValue - 6;
            
            return {
                title: { text: '' },
                tooltip: {
                    trigger: 'axis',
                    formatter: function(params) {
                        const baseParam = params[0];
                        if (markPoints.some(p => p.xAxis === baseParam.dataIndex)) {
                            return `${baseParam.name}<br/>${baseParam.marker} ${baseParam.seriesName}: ${baseParam.value}<br/><span style="color: #ff4d4f">⚠️ 异常值</span>`;
                        }
                        return `${baseParam.name}<br/>${baseParam.marker} ${baseParam.seriesName}: ${baseParam.value}`;
                    }
                },
                legend: {
                    data: ['温度数据', '阈值上限', '阈值下限']
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: dates
                },
                yAxis: {
                    type: 'value',
                    name: '温度 (°C)',
                    axisLabel: {
                        formatter: '{value} °C'
                    }
                },
                series: [
                    {
                        name: '温度数据',
                        type: 'line',
                        data: values,
                        smooth: true,
                        symbol: 'emptyCircle',
                        symbolSize: 8,
                        markPoint: {
                            symbol: 'pin',
                            symbolSize: 40,
                            data: markPoints
                        }
                    },
                    {
                        name: '阈值上限',
                        type: 'line',
                        data: Array(30).fill(upperThreshold),
                        lineStyle: {
                            type: 'dashed',
                            color: '#faad14'
                        },
                        symbol: 'none'
                    },
                    {
                        name: '阈值下限',
                        type: 'line',
                        data: Array(30).fill(lowerThreshold),
                        lineStyle: {
                            type: 'dashed',
                            color: '#faad14'
                        },
                        symbol: 'none'
                    }
                ]
            };
        }
        
        function getAnomalyHistoryChartOption() {
            return {
                title: { text: '' },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['当前月异常', '上月异常', '去年同期异常']
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: ['第1周', '第2周', '第3周', '第4周']
                },
                yAxis: {
                    type: 'value',
                    name: '异常数量'
                },
                series: [
                    {
                        name: '当前月异常',
                        type: 'line',
                        data: [5, 7, 3, 4],
                        smooth: true,
                        lineStyle: { width: 3 },
                        itemStyle: { color: '#1890ff' }
                    },
                    {
                        name: '上月异常',
                        type: 'line',
                        data: [8, 9, 6, 5],
                        smooth: true,
                        lineStyle: { width: 3 },
                        itemStyle: { color: '#faad14' }
                    },
                    {
                        name: '去年同期异常',
                        type: 'line',
                        data: [10, 12, 8, 7],
                        smooth: true,
                        lineStyle: { width: 3 },
                        itemStyle: { color: '#52c41a' }
                    }
                ]
            };
        }
        
        function getCalibrationChartOption() {
            // 生成一些测量值和参考值
            const measureData = [];
            const referenceData = [];
            
            for (let i = 10; i <= 35; i += 2.5) {
                // 参考值
                referenceData.push([i, i]);
                
                // 测量值（带有一些随机偏差）
                const deviation = (Math.random() * 2 - 1) * 1.5;
                measureData.push([i, i + deviation]);
            }
            
            return {
                title: { text: '' },
                tooltip: {
                    trigger: 'item',
                    formatter: function(params) {
                        if (params.seriesIndex === 2) {
                            return `理想匹配线`;
                        }
                        return `参考值: ${params.value[0].toFixed(1)}°C<br/>测量值: ${params.value[1].toFixed(1)}°C`;
                    }
                },
                legend: {
                    data: ['测量点', '拟合线', '理想匹配线']
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'value',
                    name: '参考值 (°C)',
                    min: 8,
                    max: 37
                },
                yAxis: {
                    type: 'value',
                    name: '测量值 (°C)',
                    min: 8,
                    max: 37
                },
                series: [
                    {
                        name: '测量点',
                        type: 'scatter',
                        data: measureData,
                        symbolSize: 10,
                        itemStyle: { color: '#1890ff' }
                    },
                    {
                        name: '拟合线',
                        type: 'line',
                        data: [[8, 7.2], [37, 37.8]],
                        smooth: true,
                        symbolSize: 0,
                        lineStyle: {
                            width: 2,
                            color: '#52c41a'
                        }
                    },
                    {
                        name: '理想匹配线',
                        type: 'line',
                        data: [[8, 8], [37, 37]],
                        smooth: true,
                        symbolSize: 0,
                        lineStyle: {
                            width: 2,
                            type: 'dashed',
                            color: '#faad14'
                        }
                    }
                ]
            };
        }
        
        function getValidationChartOption() {
            // 日期数据
            const dates = ['10/1', '10/2', '10/3', '10/4', '10/5', '10/6', '10/7', '10/8', '10/9', '10/10'];
            
            // 生成一些接近的模拟数据
            const referenceSensor = [];
            const calibratedSensor = [];
            const uncalibratedSensor = [];
            
            for (let i = 0; i < 10; i++) {
                const baseValue = 22 + Math.sin(i * 0.8) * 4 + (Math.random() * 0.5);
                referenceSensor.push(baseValue.toFixed(1));
                
                // 校准后的值，与参考值非常接近
                calibratedSensor.push((baseValue + (Math.random() * 0.8 - 0.4)).toFixed(1));
                
                // 未校准的值，偏差较大
                const uncalOffset = Math.sin(i * 0.5) * 3 + (Math.random() * 2 - 1);
                uncalibratedSensor.push((baseValue + uncalOffset).toFixed(1));
            }
            
            return {
                title: { text: '' },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['参考传感器', '校准后传感器', '校准前传感器']
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: dates
                },
                yAxis: {
                    type: 'value',
                    name: '温度 (°C)',
                    axisLabel: {
                        formatter: '{value} °C'
                    }
                },
                series: [
                    {
                        name: '参考传感器',
                        type: 'line',
                        data: referenceSensor,
                        smooth: true,
                        lineStyle: { width: 3 },
                        itemStyle: { color: '#1890ff' }
                    },
                    {
                        name: '校准后传感器',
                        type: 'line',
                        data: calibratedSensor,
                        smooth: true,
                        lineStyle: { width: 3 },
                        itemStyle: { color: '#52c41a' }
                    },
                    {
                        name: '校准前传感器',
                        type: 'line',
                        data: uncalibratedSensor,
                        smooth: true,
                        lineStyle: { 
                            width: 3,
                            type: 'dashed'
                        },
                        itemStyle: { color: '#faad14' }
                    }
                ]
            };
        }
        
        function getTrendComparisonChartOption() {
            return {
                title: { text: '' },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['当前月温度', '上月温度', '去年同期温度']
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: ['第1周', '第2周', '第3周', '第4周']
                },
                yAxis: {
                    type: 'value',
                    name: '平均温度 (°C)',
                    axisLabel: {
                        formatter: '{value} °C'
                    }
                },
                series: [
                    {
                        name: '当前月温度',
                        type: 'line',
                        data: [24.5, 23.8, 22.1, 21.4],
                        smooth: true,
                        lineStyle: { width: 3 },
                        itemStyle: { color: '#1890ff' }
                    },
                    {
                        name: '上月温度',
                        type: 'line',
                        data: [27.2, 26.5, 25.8, 24.9],
                        smooth: true,
                        lineStyle: { width: 3 },
                        itemStyle: { color: '#faad14' }
                    },
                    {
                        name: '去年同期温度',
                        type: 'line',
                        data: [25.1, 24.3, 23.2, 22.5],
                        smooth: true,
                        lineStyle: { width: 3 },
                        itemStyle: { color: '#52c41a' }
                    }
                ]
            };
        }
        
        function getRawDataChartOption() {
            return {
                title: { text: '' },
                tooltip: {
                    trigger: 'axis',
                    formatter: function(params) {
                        const param = params[0];
                        return `${param.name}<br/>${param.marker} ${param.seriesName}: ${param.value}°C`;
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: Array.from({length: 24}, (_, i) => `${i}:00`)
                },
                yAxis: {
                    type: 'value',
                    name: '温度 (°C)',
                    axisLabel: {
                        formatter: '{value} °C'
                    }
                },
                series: [
                    {
                        name: '温度',
                        type: 'line',
                        data: [19.5, 19.2, 18.8, 18.5, 18.2, 18.6, 19.2, 20.5, 22.3, 24.1, 25.8, 27.2, 
                               28.4, 29.2, 29.6, 29.3, 28.7, 27.5, 26.3, 24.8, 23.2, 21.9, 20.7, 20.1],
                        smooth: true,
                        lineStyle: { width: 3 },
                        itemStyle: { color: '#1890ff' },
                        areaStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                    offset: 0, color: 'rgba(24, 144, 255, 0.5)' // 开始颜色
                                }, {
                                    offset: 1, color: 'rgba(24, 144, 255, 0.1)' // 结束颜色
                                }]
                            }
                        }
                    }
                ]
            };
        }

        // 添加缺失的相关性散点图配置函数
        function getCorrelationScatterChartOption() {
            console.log('生成相关性散点图配置');
            
            // 创建随机数据点用于温度和湿度的相关性展示
            const data = [];
            for (let i = 0; i < 30; i++) {
                // 基础温度15-35度，湿度随温度降低（负相关）
                const temp = 15 + Math.random() * 20;
                // 添加一些随机性，但保持负相关趋势
                const humidity = 95 - (temp - 15) * 2.5 + (Math.random() * 10 - 5);
                data.push([temp.toFixed(1), humidity.toFixed(1)]);
            }
            
            return {
                title: {
                    text: '温度与湿度相关性分析'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: function(params) {
                        return '温度: ' + params.value[0] + ' °C<br>湿度: ' + params.value[1] + ' %';
                    }
                },
                grid: {
                    left: '5%',
                    right: '5%',
                    bottom: '10%',
                    containLabel: true
                },
                xAxis: {
                    type: 'value',
                    name: '温度 (°C)',
                    nameLocation: 'middle',
                    nameGap: 30,
                    min: 15,
                    max: 35
                },
                yAxis: {
                    type: 'value',
                    name: '湿度 (%)',
                    nameLocation: 'middle',
                    nameGap: 30,
                    min: 20,
                    max: 90
                },
                series: [{
                    name: '温度-湿度',
                    type: 'scatter',
                    symbolSize: 10,
                    data: data,
                    markLine: {
                        lineStyle: {
                            type: 'solid',
                            width: 2
                        },
                        data: [
                            {
                                type: 'linear',
                                xAxis: 15,
                                yAxis: 90,
                                x2: 35,
                                y2: 40,
                                label: {
                                    formatter: 'y = -2.5x + 127.5'
                                }
                            }
                        ]
                    },
                    itemStyle: {
                        color: '#1890ff'
                    }
                }]
            };
        }

        // 在页面加载完成后强制重新初始化所有图表
        document.addEventListener('DOMContentLoaded', function() {
            // 原有代码

            // 添加一个延迟加载所有图表的机制
            setTimeout(() => {
                console.log('DOM加载完成后强制重新初始化所有图表');
                initializeCharts();
                
                // 如果在数据分析页面，确保相关图表显示
                const analysisSection = document.getElementById('analysis');
                if (analysisSection && analysisSection.classList.contains('active')) {
                    const correlationButton = document.querySelector('[data-analysis="correlation"]');
                    if (correlationButton) {
                        console.log('强制显示相关性分析');
                        correlationButton.click();
                    }
                }
            }, 1000);
        });

        // 强化版初始化所有图表函数
        function initializeChartsEnhanced() {
            console.log('初始化所有图表 - 强化版');
            
            try {
                // 仪表盘图表
                console.log('初始化仪表盘图表');
                initializeChart('trendChart', getTrendChartOption());
                initializeChart('sensorStatusChart', getSensorStatusChartOption());
                initializeChart('dataDistributionChart', getDataDistributionChartOption());
                
                // 原始数据图表
                console.log('初始化原始数据图表');
                initializeChart('rawDataChart', getRawDataChartOption());
                
                // 统计数据图表
                console.log('初始化统计数据图表');
                initializeChart('statisticsChart', getStatisticsChartOption());
                initializeChart('distributionChart', getDistributionChartOption());
                
                // 自定义PM2.5相关图表
                console.log('初始化数据分析图表 - 自定义PM相关图表');
                
                // 相关性分析图表 - 使用PM2.5和PM10数据
                initializeChart('correlationScatterChart', {
                    title: {
                        text: 'PM2.5与PM10相关性分析'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: function(params) {
                            return 'PM2.5: ' + params.value[0] + ' μg/m³<br>PM10: ' + params.value[1] + ' μg/m³';
                        }
                    },
                    grid: {
                        left: '5%',
                        right: '5%',
                        bottom: '10%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'value',
                        name: 'PM2.5 (μg/m³)',
                        nameLocation: 'middle',
                        nameGap: 30,
                        min: 0,
                        max: 80
                    },
                    yAxis: {
                        type: 'value',
                        name: 'PM10 (μg/m³)',
                        nameLocation: 'middle',
                        nameGap: 30,
                        min: 0,
                        max: 180
                    },
                    series: [{
                        name: 'PM2.5-PM10',
                        type: 'scatter',
                        symbolSize: 10,
                        data: [
                            [25, 52], [30, 65], [42, 87], [15, 35], [22, 48],
                            [35, 76], [48, 102], [55, 125], [62, 140], [18, 40],
                            [28, 58], [37, 82], [45, 95], [52, 115], [60, 135],
                            [32, 68], [38, 85], [50, 110], [58, 130], [65, 145],
                            [20, 45], [33, 70], [40, 88], [48, 105], [55, 120],
                            [27, 60], [36, 78], [43, 92], [53, 118], [47, 100]
                        ],
                        markLine: {
                            lineStyle: {
                                type: 'solid',
                                width: 2
                            },
                            data: [
                                {
                                    type: 'linear',
                                    xAxis: 0,
                                    yAxis: 0,
                                    x2: 80,
                                    y2: 160,
                                    label: {
                                        formatter: 'PM10 ≈ 2×PM2.5'
                                    }
                                }
                            ]
                        },
                        itemStyle: {
                            color: '#1890ff'
                        }
                    }]
                });
                
                // 初始化其他图表
                initializeAnalysisCharts();
                
            } catch (error) {
                console.error('初始化图表过程中出错:', error);
            }
        }

        // 初始化分析相关图表的辅助函数
        function initializeAnalysisCharts() {
            console.log('初始化分析相关图表');
            
            // 趋势对比分析图表 - 使用不同站点PM数据
            initializeChart('trendComparisonChart', {
                title: { text: '不同站点污染物浓度对比' },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['钱塘江站 PM2.5', '钱塘江站 PM10', '西湖站 PM2.5', '西湖站 PM10']
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
                },
                yAxis: {
                    type: 'value',
                    name: '浓度 (μg/m³)',
                    axisLabel: {
                        formatter: '{value} μg/m³'
                    }
                },
                series: [
                    {
                        name: '钱塘江站 PM2.5',
                        type: 'line',
                        data: [42, 45, 41, 40, 38, 32, 30],
                        smooth: true,
                        lineStyle: { width: 3 },
                        itemStyle: { color: '#1890ff' }
                    },
                    {
                        name: '钱塘江站 PM10',
                        type: 'line',
                        data: [82, 85, 80, 78, 75, 68, 62],
                        smooth: true,
                        lineStyle: { width: 3 },
                        itemStyle: { color: '#fa8c16' }
                    },
                    {
                        name: '西湖站 PM2.5',
                        type: 'line',
                        data: [34, 35, 33, 32, 30, 26, 24],
                        smooth: true,
                        lineStyle: { width: 3 },
                        itemStyle: { color: '#52c41a' }
                    },
                    {
                        name: '西湖站 PM10',
                        type: 'line',
                        data: [67, 70, 65, 64, 60, 55, 50],
                        smooth: true,
                        lineStyle: { width: 3 },
                        itemStyle: { color: '#f5222d' }
                    }
                ]
            });
            
            // 预测分析图表 - 使用PM2.5预测数据
            initializeChart('forecastChart', {
                title: { text: 'PM2.5浓度预测分析' },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['历史PM2.5', '预测PM2.5', '预测上限', '预测下限']
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: ['10/10', '10/11', '10/12', '10/13', '10/14', '10/15', '10/16', '10/17', '10/18', '10/19', '10/20']
                },
                yAxis: {
                    type: 'value',
                    name: 'PM2.5 (μg/m³)',
                    axisLabel: {
                        formatter: '{value} μg/m³'
                    }
                },
                series: [
                    {
                        name: '历史PM2.5',
                        type: 'line',
                        data: [32, 38, 42, 45, 35, 30, null, null, null, null, null],
                        smooth: true,
                        lineStyle: { width: 3 },
                        itemStyle: { color: '#1890ff' }
                    },
                    {
                        name: '预测PM2.5',
                        type: 'line',
                        data: [null, null, null, null, null, 30, 38, 48, 52, 46, 35],
                        smooth: true,
                        lineStyle: { width: 3, type: 'dashed' },
                        itemStyle: { color: '#52c41a' }
                    },
                    {
                        name: '预测上限',
                        type: 'line',
                        data: [null, null, null, null, null, 30, 45, 55, 60, 53, 42],
                        smooth: true,
                        lineStyle: { width: 2, type: 'dotted' },
                        itemStyle: { color: '#faad14' }
                    },
                    {
                        name: '预测下限',
                        type: 'line',
                        data: [null, null, null, null, null, 30, 31, 41, 44, 39, 28],
                        smooth: true,
                        lineStyle: { width: 2, type: 'dotted' },
                        itemStyle: { color: '#faad14' }
                    }
                ]
            });
            
            // 异常检测分析图表 - 使用VOC数据
            initializeAnomalyCharts();
            
            // 数据标定图表
            console.log('初始化数据标定图表');
            initializeChart('calibrationChart', getCalibrationChartOption());
            initializeChart('validationChart', getValidationChartOption());
            
            // 强制显示图表内容
            setTimeout(() => {
                console.log('所有图表初始化后强制重新渲染');
                resizeAllCharts();
            }, 300);
        }

        // 初始化异常检测相关图表
        function initializeAnomalyCharts() {
            // 异常检测分析图表 - 使用VOC数据
            initializeChart('anomalyDetectionChart', {
                title: { text: 'VOC浓度异常检测' },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['VOC浓度', '阈值上限', '阈值下限']
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: Array.from({length: 30}, (_, i) => {
                        const date = new Date(2023, 8, 15 + i);
                        return `${date.getMonth() + 1}/${date.getDate()}`;
                    })
                },
                yAxis: {
                    type: 'value',
                    name: 'VOC浓度 (ppm)',
                    axisLabel: {
                        formatter: '{value} ppm'
                    }
                },
                series: [
                    {
                        name: 'VOC浓度',
                        type: 'line',
                        data: [
                            0.82, 0.85, 0.88, 0.91, 0.87, 0.84, 0.80, 0.78, 0.76, 0.79,
                            0.83, 0.87, 0.90, 0.89, 0.86, 0.82, 0.79, 1.42, 0.84, 0.88,
                            0.91, 0.89, 0.86, 0.83, 0.80, 0.82, 0.85, 1.92, 1.95, 0.86
                        ],
                        smooth: true,
                        symbol: 'emptyCircle',
                        symbolSize: 8,
                        markPoint: {
                            symbol: 'pin',
                            symbolSize: 40,
                            data: [
                                { name: '异常高值', value: '1.92', xAxis: 27, yAxis: 1.92, itemStyle: { color: '#ff4d4f' } },
                                { name: '异常高值', value: '1.95', xAxis: 28, yAxis: 1.95, itemStyle: { color: '#ff4d4f' } },
                                { name: '轻微异常', value: '1.42', xAxis: 17, yAxis: 1.42, itemStyle: { color: '#ff4d4f' } }
                            ]
                        }
                    },
                    {
                        name: '阈值上限',
                        type: 'line',
                        data: Array(30).fill(1.4),
                        lineStyle: {
                            type: 'dashed',
                            color: '#faad14'
                        },
                        symbol: 'none'
                    },
                    {
                        name: '阈值下限',
                        type: 'line',
                        data: Array(30).fill(0.5),
                        lineStyle: {
                            type: 'dashed',
                            color: '#faad14'
                        },
                        symbol: 'none'
                    }
                ]
            });
            
            initializeChart('anomalyHistoryChart', getAnomalyHistoryChartOption());
        }

        // 原始数据图表
        console.log('初始化原始数据图表');
        // 使用内联配置代替调用函数，避免编码问题
        let rawDataChartInstance; // 全局变量，用于保存图表实例

        function initializeRawDataChart() {
            const chartDom = document.getElementById('rawDataChart');
            if (!chartDom) return;

            // 创建图表实例并保存到全局变量
            rawDataChartInstance = echarts.init(chartDom);
            
            // 准备多个参数的数据
            const chartData = {
                temp: {
                    name: '温度',
                    data: [19.5, 19.2, 18.8, 18.5, 18.2, 18.6, 19.2, 20.5, 22.3, 24.1, 25.8, 27.2, 
                          28.4, 29.2, 29.6, 29.3, 28.7, 27.5, 26.3, 24.8, 23.2, 21.9, 20.7, 20.1],
                    color: '#1890ff',
                    unit: '°C'
                },
                hum: {
                    name: '湿度',
                    data: [65, 67, 68, 70, 72, 74, 73, 69, 65, 62, 58, 55, 
                          52, 50, 48, 47, 50, 54, 58, 62, 66, 68, 70, 72],
                    color: '#52c41a',
                    unit: '%'
                },
                pressure: {
                    name: '气压',
                    data: [1013, 1012, 1012, 1011, 1011, 1010, 1010, 1011, 1011, 1012, 1012, 1013, 
                          1013, 1014, 1014, 1014, 1013, 1013, 1012, 1012, 1012, 1013, 1013, 1013],
                    color: '#faad14',
                    unit: 'hPa'
                }
            };
            
            // 根据复选框状态获取当前应该显示的参数
            function getEnabledParameters() {
                const enabledParams = [];
                document.querySelectorAll('.parameter-toggle[data-chart="rawDataChart"]').forEach(checkbox => {
                    if (checkbox.checked) {
                        enabledParams.push(checkbox.value);
                    }
                });
                return enabledParams;
            }
            
            // 更新图表配置
            function updateChart() {
                const enabledParams = getEnabledParameters();
                const series = enabledParams.map(param => {
                    const paramData = chartData[param];
                    return {
                        name: `${paramData.name} (${paramData.unit})`,
                        type: 'line',
                        data: paramData.data,
                        smooth: true,
                        lineStyle: { width: 3 },
                        itemStyle: { color: paramData.color },
                        areaStyle: param === 'temp' ? {
                            color: {
                                type: 'linear',
                                x: 0, y: 0, x2: 0, y2: 1,
                                colorStops: [{
                                    offset: 0, color: `rgba(${param === 'temp' ? '24, 144, 255' : 
                                              param === 'hum' ? '82, 196, 26' : 
                                              '250, 173, 20'}, 0.5)`
                                }, {
                                    offset: 1, color: `rgba(${param === 'temp' ? '24, 144, 255' : 
                                              param === 'hum' ? '82, 196, 26' : 
                                              '250, 173, 20'}, 0.1)`
                                }]
                            }
                        } : undefined
                    };
                });
                
                // 设置Y轴单位
                let yAxisName = '';
                if (enabledParams.length === 1) {
                    // 如果只选择了一个参数，Y轴显示该参数单位
                    yAxisName = `${chartData[enabledParams[0]].name} (${chartData[enabledParams[0]].unit})`;
                } else if (enabledParams.length > 1) {
                    // 如果选择了多个参数，Y轴标题为通用描述
                    yAxisName = '参数值';
                }
                
                rawDataChartInstance.setOption({
                    title: { text: '环境参数趋势' },
                    tooltip: {
                        trigger: 'axis',
                        formatter: function(params) {
                            let result = params[0].name + '<br/>';
                            params.forEach(param => {
                                result += `${param.marker} ${param.seriesName}: ${param.value}<br/>`;
                            });
                            return result;
                        }
                    },
                    legend: {
                        data: enabledParams.map(param => `${chartData[param].name} (${chartData[param].unit})`)
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: Array.from({length: 24}, (_, i) => `${i}:00`)
                    },
                    yAxis: {
                        type: 'value',
                        name: yAxisName,
                        axisLabel: {
                            formatter: '{value}'
                        }
                    },
                    series: series
                });
            }
            
            // 初始化图表
            updateChart();
            
            // 添加复选框变化事件监听器
            document.querySelectorAll('.parameter-toggle[data-chart="rawDataChart"]').forEach(checkbox => {
                checkbox.addEventListener('change', updateChart);
            });
        }

        // 替换原始的图表初始化代码
        initializeRawDataChart();

        // 更新面包屑导航
        function updateBreadcrumb(sectionId) {
            const currentSectionElement = document.getElementById('current-section');
            if (currentSectionElement) {
                const sectionText = document.querySelector(`.nav-link[data-section="${sectionId}"] span`);
                if (sectionText) {
                    currentSectionElement.textContent = sectionText.textContent;
                }
            }
            
            console.log(`切换到页面: ${sectionId}`);
        }
    </script>
</body>
</html> 